关于nginx:解决vue项目在nginx中配置location不是-的问题

February 16, 2023 · 1 min · jiezi

在nginx中配置vue我的项目的时候，相似于location /XXX {}这种，会呈现很多问题，比方404，403，刷新404等等状况，还是没有搞懂什么起因，不过却找到了解决办法，记录一下，避免遗记！

1. 批改vue我的项目中vue.config.js文件中的 publicPath在生产环境中的子门路。
```
publicPath: process.env.NODE_ENV === "production" ? "/子门路" : "/",
```

在vue我的项目中router目录下index.js文件中 export default new Router{}的节点中增加或者批改base: 子门路属性。

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

1. 如上配置，就会在生产环境中拜访我的项目时，在域名前面会主动加上 /子门路，例如：
```
 http://XXXX.com/子门路/index
```
1. 在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门路保持一致！