乐趣区

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

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

    1. 批改 vue 我的项目中 vue.config.js 文件中的 publicPath在生产环境中的子门路。

      publicPath: process.env.NODE_ENV === "production" ? "/ 子门路" : "/",
    1. 在 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 门路保持一致!
退出移动版