vue设置publicPath为cdn地址后路由错乱的解决办法vue设置publicPath为cdn地址后路由错乱的解决

问题背景

用 vue-cli 创建的项目，开发完成后要部署线上环境。

因为我的项目是用的二级目录域名，示例：http://www.baidu.com/my-pro/list

其中，my-pro即是二级目录，所以我需要在 vue.config.js 中的 publicPath 属性上配置上：

//...
publicPath: 'my-pro',
//...

在生产环境打包的时候，publicPath 的值就为：

//...
publicPath: 'http://cdn.baidu.com/assets/',
//...

但是这样设置的时候，路由很可能就会乱掉，会出现如下链接：

http://www.baidu.com/http://cdn.baidu.com/assets/list

如果你恰好使用了：process.env.BASE_URL 变量，那么 vue-cli 会把这个值的变量替换为你在 vue.config.js 中设置的 publicPath 的值，这就是路由乱掉的原因。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

可以在 .env 配置文件中再定义个配置来给路由的 createWebHistory 使用。比如：

const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_ROUTER_BASE),
  routes
});