[Vue] 編譯專案不加密圖檔
一般由npm run build出來的圖片都會變成
原始檔名.亂碼(hash碼).png (or .jpg/.svg…)
但如果後續專案由PM或客戶自行維護
這樣的加密檔名可能會增加識別的困難性
以及vue-cli創建的webpack默認會將10kb以下的圖片和字體文件轉為base64
被轉換的檔案就不會出現在目錄img中。如果要替換圖檔，如:替換LOGO檔就沒辦法達成。
說明解決：
輕量圖片檔不轉base64 + 檔名不添加亂碼
Vue2
修改 build/webpack.base.conf.js
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
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加密亂碼的
module.exports = {
filenameHashing: false,
}
以上