如何通过Vue CLI构建将静态资源路径切换至CDN子域名？

没问题，这两个需求都能轻松搞定，我来给你拆解清楚：

1. 通用思路：切换资源源到其他子域名 #

本质上就是给所有静态资源（JS/CSS/图片等）的引用路径加上统一的子域名/CDN前缀，具体实现分两种场景：

• 如果是纯静态项目（无构建工具）：直接全局替换所有资源的src/href属性前缀，把/js/xxx.js改成https://subdomain.example.com/js/xxx.js即可
• 如果是用构建工具（比如Vue CLI、Webpack）：不需要手动修改代码，直接通过工具的配置项统一设置基础路径，构建时自动替换所有资源引用

2. Vue CLI构建时切换到CDN域名（你的核心需求） #

完全可以实现，Vue CLI专门提供了publicPath配置项来解决这个问题，对应Webpack底层的output.publicPath，具体步骤如下：

步骤1：配置vue.config.js #

打开项目根目录的vue.config.js（如果没有就新建一个），添加publicPath配置，值设为你的CDN前缀：

module.exports = {
  // 注意结尾要加斜杠，避免路径拼接错误
  publicPath: 'https://cdn.example.com/myapp/'
}

步骤2：执行构建命令 #

运行npm run build（或yarn build）完成构建，生成的dist目录里的index.html就会自动把所有静态资源的路径替换成你期望的CDN地址：

...

额外实用技巧 #

• 环境区分配置：如果希望开发环境用本地路径（方便调试），生产环境才用CDN，可以通过环境变量动态判断：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? 'https://cdn.example.com/myapp/' 
    : '/' // 开发环境用根路径
}

• 静态资源自动替换：项目中引用的图片、字体等资源（比如@/assets/logo.png或CSS里的url('~@/assets/bg.jpg')），构建后都会自动带上CDN前缀，不需要额外修改代码

内容的提问来源于stack exchange，提问作者Jon Sud