[Vue] 編譯專案不加密圖檔
一般由npm run build出來的圖片都會變成
原始檔名.亂碼(hash碼).png (or .jpg/.svg…)
但如果後續專案由PM或客戶自行維護
這樣的加密檔名可能會增加識別的困難性
以及vue-cli創建的webpack默認會將10kb以下的圖片和字體文件轉為base64
被轉換的檔案就不會出現在目錄img中。如果要替換圖檔，如:替換LOGO檔就沒辦法達成。
說明解決：
輕量圖片檔不轉base64 + 檔名不添加亂碼
Vue2
修改 build/webpack.base.conf.js
1 2 3 4 5 6 7 8 9 10 11 | module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 1, //預設10000=10kb name: utils.assetsPath('img/[name].[ext]') //預設 img/[name].[hash:7].[ext] } },]} |
Vue3
先在package.json 安裝外掛file-loader
修改 vue.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module.exports = {configureWebpack: { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/, use: { loader: 'file-loader', options: { outputPath: 'img', name: '[name].[ext]', limit:1 } } } ] } },}; |
若limit設置成20000時就是限制改為20kb
補充: vue-cli有參數是一次性去除js.img有加hash加密亂碼的
1 2 3 | module.exports = {filenameHashing: false, } |
以上