vue build 与 nginx采用二级路由配置

文章目录

• 引言
• 解决方案
• • vue.config.js
  • nginx配置

引言

在项目中一个项目上存在多个子应用系统，对多个系统路径统一访问时用二级路由来区分对应的子应用，但是在开始的时候折腾了很久始终没得到解决。

解决方案

vue.config.js

具体的详情参见：vue cli

• 对应Dir配置

module.exports = {/*** You will need to set publicPath if you plan to deploy your site under a sub path,* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,* then publicPath should be set to "/bar/".* In most cases please use '/' !!!* Detail: https://cli.vuejs.org/config/#publicpath*/publicPath: "/二级路由名/",outputDir: "dist/二级路由名",assetsDir: "static"
}

nginx配置

• 在我本地采用windows nginx进行测试

location /二级路由名/ {root   E:/xxx/dist;index  index.html index.htm;try_files  $uri $uri/ /二级路由名/index.html;
}

Tips:特别需要注意的是在try_files需要加上二级路由名
root采用的绝对路径，注意是反斜杠