配置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