解决vue项目在nginx中配置location不是 / 的问题

在nginx中配置vue项目的时候，类似于location /XXX {}这种，会出现很多问题，比如404，403，刷新404等等情况，还是没有搞懂什么原因，不过却找到了解决方法，记录一下，防止忘记！

1. 修改vue项目中vue.config.js文件中的 publicPath在生产环境中的子路径

publicPath: process.env.NODE_ENV === "production" ? "/子路径" : "/",

2. 在vue项目中router目录下index.js文件中 export default new Router{}的节点中添加或者修改base: 子路径属性

export default new Router({
  mode: 'history', // 去掉url中的#
  base: process.env.BASE_URL, //获取 publicPath的值，这里获取根据环境不同获取不同的publicPath
  ...其他配置
})

3. 如上配置，就会在生产环境中访问项目时，在域名后面会自动加上 /子路径，例如：

 http://XXXX.com/子路径/index

4. 在nginx中配置

location /子路径 {
  alias  E:/workspace/theFrontEnd/a/dist;
  #autoindex on;
  try_files $uri $uri/ /子路径/index.html;
  index  index.html index.htm;
}

需要注意的点：[location /子路径{}] 中的子路径必须要与vue项目中的子路径相同，并且在[try_file $uri $uri/ /子路径/index.html;]中的子路径也必须要与vue项目中的子路径相同。还有就是 [alias E:/workspace/theFrontEnd/a/dist;]这行要使用alias不要使用 root。

5. 反思

nginx学的不是太好，是不是 nginx通过 location代理 vue项目的打包路径，如果location的路径为 / 还好，会直接访问vue打包路径中的文件，如果 location 的路径不是 / 而是 /XXX,那么通过nginx访问vue项目时，就会在路径上添加 /XXX 这个子路径，所以就404了。所以要在vue项目中添加子路径，保证vue项目中的子路径跟nginx中location路径保持一致！