nginx 多站点 uniapp或vite加路由前缀

1.nginx单站点

• 我们设置的域名为： https://h5.example.com 访问的路径是我们打包后的 dist/build/h5/index.html，直接打包好的文件发送给后端即可。

2.nginx多站点

• 就是一台nginx 上面配置了多个二级地址供外面访问，比如 之前我们 访问 https://h5.example.com , 现在可能需要访问 https://h5.example.com/pay 、 https://h5.example.com/notice 、https://h5.example.com/work 等等这些带有sub-path 的访问

3.针对nginx多站点, 前端配置

• vite项目
• uniapp项目

比如nginx配置的二级地址为https://h5.example.com/pay, 那前端需要配置统一的路由前缀/pay

1.vite项目中配置路由前缀

• vite.config.[js/ts]中配置base属性

  const root = process.cwd() // 当前执行node命令时文件夹的地址(工作目录)
  export default defineConfig(({command, mode}) => {
      return {
          // 省略其他配置
          base: '/pay',
          root: root
      }
  })
  

• 注意: 如果静态资源也需要加前缀的话, 要和后端询问前缀，我们一般都是/static前缀。附上本次关于base的vite官网地址

2.uniapp中配置路由前缀

• 在manifest.json中配置

  {
      // 省略其他配置
      "h5" : {
        "title" : "xxx",
        "router" : {
        "mode" : "history", //采用history模式URL的路径才跟配置的对应上，不然URL是先加/#再追加配置的地
        "base" : "/pay"  //在页面路由上加上该前缀
        },
    //以下publicPath不主动设置时会默认为base的设置，在其静态资源上面加上前缀
    //"publicPath" : "./", (如果是本地的调试的话就配置成“./”,正式打包还是得注销掉)
  }
  

最后, 如有错误请大家更正

• 本次借鉴的两篇文章地址列出如下
  • blog.csdn.net/qq_20236937…
  • www.jianshu.com/p/f1fe5daa3…

祝大家愉快, 向上!