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

vue 如何配置使項目打包後圖片文件的引用路徑改為cdn路徑?