vue打包后的静态文件上传到CDN，如何设置静态文件域名？

在搞资源文件全球加速时需要将 JS,CSS,IMG 等静态资源放到 CDN 服务器上，WEB 网站上引用CDN 上缓存的资源，因为网站用vue-cli 搭建的，所以需要对 vue-cli 配置文件 (vue-config-js) 进行修改，修改打包后的index.html中静态资源引用路径。

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "https://resource.xxx.com/" : "/",
}

publicPath

部署应用包时的基本 URL，默认值'/'。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上。如 https://my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://my-app.com/my-app/，则设置 publicPath 为 /my-app/。

• 用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
• 这个值也可以被设置为空字符串 '' 或是相对路径 './'，这样所有的资源都会被链接为相对路径。
• 该值也是打包后生成的 index.html 静态资源文件引用的路径。通常打包后静态资源找不到时修改 publicPath 即可。
• 如上代码打包后生成的 index.html 中 js 的 src 为：https://resource.xxx.com/app.js

这时静态资源 CDN 已经结束，但是使用vue-cli 3.x的用户打包完运行发现自己的路由炸了，所有的路由都变成http:domain.com/https://resource.xxx.com/#/xx，都多加了https://resource.xxx.com/，不要慌，既然是路由的问题，咱就看一下 路由配置文件

router.js

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

base

应用的基路径，默认值 '/'。
例如，如果整个单页应用服务在 /app/ 下，base 就应该设为 "/app/"

• vue-cli 3.x 默认配置base 为 process.env.BASE_URL，即为 baseUrl

• baseUrl 从 Vue CLI 3.3 起已弃用，替换为 publicPath

• BASE_URL 和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径

因为我们刚刚在 vue.config.js 中设置了 publicPath 为 https://resource.xxx.com/，所以路由变成了这副鬼样子。

既然找到原因，那就根据自己想要的路径修改路由的 base 即可。

如果不需要特别处理路径，去掉 base 或将 base 改为'/' 就可以搞定了！！！

我的个人博客，有空来坐坐

https://www.wangyanan.online