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