背景

1. vite: vite 打包默认非 public 目录都打到 dist/index.html
2. nginx: 对应域名根路径就是 dist/index.html

location / {
    root /usr/share/nginx/html/;
    index  index.html;
    try_files $uri $uri/ $uri.html$is_args$args /index.html$is_args$args;
}

3. Android Webview 默认 H5 的 title 是 html head 的 title，后续用 JS 修改无效

• 如果 Android 不写死 title，且 html 没有 title，Android 的 title 会展示出页面 URL；
• 如果 html 有 title，后续无法修改，除非 Android 给到修改 title 的 JS-Bridge

目的

1. 希望同个项目的不同路径的页面，打包后有不同的 html，解决上述 Android 问题，以及可能优化 SEO

解决方案

1. vite 配置多页面入口

build: {
  rollupOptions: {
    input: {
      index: path.resolve(__dirname, './index.html'),
      a: path.resolve(__dirname, './html/a.html'),
      b: path.resolve(__dirname, './html/b.html')
    },
    output: {
      dir: 'dist', // 打包输出目录
    },
  },
},

2. 项目根目录对应新增 html/* 目录，并写好对应 title 和 SEO 的 html，其余和根目录的 index.html 一样
3. Dockerfile 将打包后的 dist/html 目录 COPY 到 Nginx 根目录下

COPY ./dist/html /usr/share/nginx/html

4. nginx 新增多页面的路径映射

location /a {
    root /usr/share/nginx/html/;
    try_files /a.html $uri $uri/ $uri.html$is_args$args /index.html$is_args$args;
}
location /b {
    root /usr/share/nginx/html/;
    try_files /b.html $uri $uri/ $uri.html$is_args$args /index.html$is_args$args;
}

完成

后续优化空间

1. 是否可以动态配置，而非每次都要改 vite 和 nginx
2. N 级页面，仍然 Android 会展示第一级的 title，如何解决第 N 级的 title 问题