webpack优化系列三：vue子目录路径更改---publicPath_vue 动态修改publicpath虚拟目录

publicPath网址：官网链接
1：webpack优化系列一：webpack不同环境打包配置
2：webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩
3：webpack优化系列三：vue子目录路径更改—publicPath
4：webpack优化系列四：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk

1：默认情况下，Vue CLI 会默认你的应用是被部署在一个域名的根路径上。例如 https://www.my-app.com/。
2：需求需要你的应用被部署在一个子路径上，例如如果你的应用路径改为 https://www.my-app.com/my-app/。
3：此时打包后资源路径也会增加子路径。例如由https://www.my-app.com/assets/js/app.js改为https://www.my-app.com/my-app/assets/js/app.js
4：此外前端的页面路径也增加子路径。例如页面路径由https://www.my-app.com/test改为https://www.my-app.com/my-app/test
5：开发、测试、生产的子路径各不相同。例如开发子路径：my-app-dev；测试子路径：my-app-test；生产子路径my-app
上述情况都需要修改设置 publicPath，具体内容如下：

前端工程配置

一：环境配置

为了满足开发、测试、生产的子路径各不相同，且不需要每次打包时调整，故而在env文件中增加相关配置
解析不同环境打包配置文件具体参考webpack优化系列一：webpack不同环境打包配置

新建.env.dev文件

VUE_APP_NODE_ENV = 'dev'
VUE_APP_BASE_UPL='/my-app-dev/' // 必须前后斜杠都有
// 其他所需配置都可在此定义
1
2
3

新建.env.test文件

VUE_APP_NODE_ENV = 'test'
VUE_APP_BASE_UPL='/my-app-test/'
// 其他所需配置都可在此定义
1
2
3

新建.env.prod文件

VUE_APP_NODE_ENV = 'prod'
VUE_APP_BASE_UPL='/my-app/'
// 其他所需配置都可在此定义
1
2
3

修改vue.config.js配置

部署应用包时的基本 URL，前端资源路径增加子目录

module.exports = {
  // 基本路径 
  publicPath: process.env.VUE_APP_BASE_UPL,
}
1
2
3
4

修改router配置

前端路径中增加子目录

// vue2.0
export default new Router({
    mode: 'history',
    base: process.env.VUE_APP_BASE_UPL,
    routes:[
        {
            path: '/home',
            name: 'home',
            component: () => import('@/components/home.vue')
        }
    ]
})
// vue3.0
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_BASE_UPL),
  routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

接口请求配置

需要将后端请求也加上子目录
若请求直接用的真实ip则只修改前端
若请求调用的是虚拟域名，则需要修改域名及nginx
请求url，例如https://www.my-app.com/my-app/web/message/view/unread

前端调整

直接在各环境配置域名的部分增加子目录即可，配置如上述环境配置

nginx配置

    location / {
        root   /usr/share/nginx/html/dist;  # 存放dist
        index  index.html index.htm;
        try_files $uri $uri/  /index.html;  # 解决history路由页面刷新404问题
        # 若上面方法不行则可增加如下配置
        if (!-e $request_filename) { 
          rewrite ^/(.*) /index.html last;
        break;
    }
        
    }
    # 配置与后端服务器地址的映射
    location ^~ /my-app-dev/ {
        proxy_pass  http://172.17.0.2:8080/my-app-dev/;
    }
    location ^~ /my-app-test/ {
        proxy_pass  http://172.17.0.2:8080/my-app-test/;
    }
     location ^~ /my-app/ {
        proxy_pass  http://172.17.0.2:8080/my-app/;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22