Vue+Webpack资源路径配置：如何自动适配生产服务器路径？

嘿，我之前也碰到过这种需要给不同资源设置不同publicPath的情况，直接改全局的assetsPublicPath确实解决不了，不过通过vue-cli的webpack链式配置可以轻松搞定，给你两个可行的方案：

方案一：用chainWebpack分别配置HTML和CSS插件 #

vue-cli提供了chainWebpack来灵活修改webpack的配置，我们可以分别调整html-webpack-plugin和mini-css-extract-plugin的publicPath参数，满足不同文件的路径需求：

在项目根目录的vue.config.js中添加以下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  outputDir: 'dist', // 对应你原来的assetsRoot
  assetsDir: 'assets', // 对应assetsSubDirectory
  chainWebpack: config => {
    // 配置index.html中的资源引用路径：去掉../，直接用assets/开头
    config.plugin('html').tap(args => {
      args[0].publicPath = '';
      return args;
    });

    // 配置CSS文件中的资源引用路径：设置为../，让css里的图片指向上级目录的img文件夹
    config.plugin('extract-css').tap(args => {
      args[0].publicPath = '../';
      return args;
    });
  }
})

配置说明： #

• html-webpack-plugin的publicPath设为空字符串后，index.html里的资源引用会变成assets/css/app.css，刚好匹配你的需求；
• mini-css-extract-plugin（vue-cli中对应extract-css插件）的publicPath设为../后，CSS文件里的图片引用会变成../img/myimage.png，完美对应dist/assets/css/到dist/assets/img/的相对路径。

方案二：直接覆盖configureWebpack配置 #

如果你更习惯直接修改webpack配置对象，也可以用configureWebpack来手动配置插件：

const { defineConfig } = require('@vue/cli-service')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = defineConfig({
  outputDir: 'dist',
  assetsDir: 'assets',
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'assets/css/[name].css',
        chunkFilename: 'assets/css/[name].chunk.css',
        publicPath: '../' // 给CSS资源设置单独的publicPath
      })
    ]
  },
  chainWebpack: config => {
    // 同样修改HTML插件的publicPath
    config.plugin('html').tap(args => {
      args[0].publicPath = '';
      return args;
    });
  }
})

验证效果 #

打包后你会看到：

• index.html中的CSS引用是assets/css/app.css
• app.css中的图片引用是../img/myimage.png
  完全符合生产服务器的部署要求，再也不用手动replaceAll啦！

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