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