配置vue项目将打包后图片文件的引用路径改为cdn路径?

vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径

vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/xx.png, 我们希望改为 https://oss.xx.com/img/xx.png

思路:

了解到 publicPath 可以修改项目内静态文件的引用路径, 尝试这样修改

module.exports = {
  ..
  publicPath:'https://oss.xx.com/img'
  ..
}

但这样修改publicPath会使所有静态文件(js, css, img等)都走这个路径,

如果只想针对img文件走cdn的话需要在 chainWebpack 里修改图片类型文件的 file-loader 配置项, 单独配置其 publicPath.

像这样:

module.exports = {
chainWebpack: config => {
    config
      .module
      .rule("images")
      .test(/\.(jpg|png|gif)$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit:10,
        publicPath: 'https://oss.xx.com/img' ,
        outputPath: 'img',
        name: '[name].[ext]',
      })
      .end();
}

 

但是这样配置的话, 不管开发还是生产环境下都会将引用路径修改为cdn路径, 而我们的需求是只在生产环境下使用cdn, 开发环境下使用相对路径,

因此使用process.env.NODE_ENV判断项目环境

这里我们把相关选项写在了url-loader里, url-loader本身的作用是将图片引用方式转换为base64的内联引用方式,

通过配置limit, 可使文件大小小于此limit值(单位为byte)的文件转换为base64格式, 大于此limit的, 会执行options中的fallback配置项插件,

fallback默认值为file-loader, 而且url-loader的options配置项也会被传递给file-loader.(查看文档)

最终代码:

module.exports = {
chainWebpack: config => {
    config
      .module
      .rule("images")
      .test(/\.(jpg|png|gif)$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit:10,
        // 以下配置项用于配置file-loader
        // 根据环境使用cdn或相对路径
        publicPath: process.env.NODE_ENV === 'production' ? 'https://oss.xx.com/img' : './',
        // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
        outputPath: 'img',
        // 配置打包后图片文件名
        name: '[name].[ext]',
      })
      .end();
}

 

参考文章/文档:

[译] Webpack——令人困惑的地方

webpack url-loader

webpack file-loader

process.env.NODE_ENV