Vue3 vue-cli项目如何配置webpack使用CDN绝对路径加载JS/CSS等静态资源

你对publicPath配置项的认知有误，该参数本身完全支持填写完整的绝对CDN地址，恰好能满足你“index.html部署在自有域名、静态资源走独立CDN”的需求，具体配置方法如下：

1. 基础通用配置 #

直接在vue.config.js中配置publicPath即可，建议区分生产和开发环境，避免影响本地调试：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 生产环境使用CDN绝对路径，开发环境保留默认根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://abc.cloudfront.net/__data/'
    : '/',
  // 其余原有配置保持不变即可
})

配置生效后，打包生成的index.html中所有JS、CSS资源的引用路径会自动拼接CDN前缀，例如原本的js/app.d2a31f9c.js会变为https://abc.cloudfront.net/__data/js/app.d2a31f9c.js，完全符合你的要求。

2. 静态资源（图片、字体等）引用注意事项 #

• 存放在src/assets目录下，在Vue模板、CSS中通过相对路径引用的资源，打包时会自动拼接你配置的publicPath前缀，无需额外修改
• 存放在public目录下的资源，如果你在代码中手动写死了路径（例如/image1.jpg），需要改为动态拼接process.env.BASE_URL的写法，示例如下：

<template>
  <!-- 错误写法：打包后不会自动添加CDN前缀 -->
  <!-- <img src="/image1.jpg" alt="示例图"> -->
  <!-- 正确写法：自动匹配配置的publicPath -->
  <img :src="`${process.env.BASE_URL}image1.jpg`" alt="示例图">
</template>

其中process.env.BASE_URL是Vue CLI自动注入的变量，值与你配置的publicPath完全一致。

3. 不同类型资源配置不同CDN的方法 #

如果你需要给JS/CSS、图片、字体等资源配置不同的CDN地址，可以通过修改webpack链配置单独指定对应资源的publicPath，示例如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // JS、CSS资源默认走这个CDN
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://abc.cloudfront.net/__data/'
    : '/',
  chainWebpack: config => {
    // 单独给图片资源配置专属CDN
    config.module
      .rule('images')
      .generator
      .publicPath('https://img-cdn.example.com/__data/')
    
    // 单独给字体资源配置专属CDN
    config.module
      .rule('fonts')
      .generator
      .publicPath('https://font-cdn.example.com/__data/')
  }
})

配置验证 #

执行打包命令npm run build后，打开dist目录下的index.html文件，检查资源引用路径是否已经替换为完整的CDN绝对地址即可。

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