vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名
修改打包配置實現(xiàn)代碼打包后的自定義命名
打包后文件
修改配置后打包為
首先修改router文件
例如,這是原本方法引用頁面:
//基礎配置 import BasicDispose from './pages/BasicDispose/BasicDispose'
現(xiàn)修改為:
const BasicDispose = () => import(/* webpackChunkName: "BasicDispose" */ './pages/BasicDispose/BasicDispose')
注:
/* webpackChunkName: “BasicDispose” */內的BasicDispose是打包后的文件名,可以隨意命名,一般是同一文件內的頁面認為是一個模塊,打包成一個js文件,而這個js文件以這些頁面的文件夾名字命名,比較便于理解。
打開項目中的build文件夾
修改js打包的命名方法
webpack.prod.conf.js文件中把
filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
修改為:
filename: utils.assetsPath('js/[name].js?v=[chunkhash]'), chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')
如下所示:
output: { ?? ?path: config.build.assetsRoot, ?? ?//原始代碼設置 ?? ?// filename: utils.assetsPath('js/[name].[chunkhash].js'), ?? ?// chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') ?? ?filename: utils.assetsPath('js/[name].js?v=[chunkhash]'), ?? ?chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]') }
修改css打包的命名方法
webpack.prod.conf.js文件中把
filename: utils.assetsPath('css/[name].[contenthash].css'),
修改為:
filename: utils.assetsPath('css/[name].css?v=[contenthash]'),
如要修改圖片的打包命名的方法則在
module–rules內關于圖片的修改如下圖所示修改對應的路徑即可
命名修改如下
name: utils.assetsPath('img/[name].[ext]?v=[hash:7]')
圖片還有一種情況是
對于小圖片,是直接壓縮成base64編碼的圖片,這里可以手動修改limit的設置,這是極限大小的參數(shù),小于極限參數(shù)會自動進行壓縮,如果將limit的值設的很大,使所有的圖片都進行壓縮的話,雖然不會涉及到路徑的問題,但是會使瀏覽器壓力很大,頁面的相應時間會有影響。
vue 修改打包文件名
修改配置文件 webpack.prod.conf.js
output: { ? publicPath: './', ? path: config.build.assetsRoot, ? filename: utils.assetsPath('js/[name].js'), ? chunkFilename: utils.assetsPath('js/[id].js') }, new ExtractTextPlugin({ ? filename: utils.assetsPath('css/[name].css'),
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結合實例形式總結分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02vue + element動態(tài)多表頭與動態(tài)插槽
這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽,下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關資料展開文章的內容,具有一定的參考價值,需要的小伙伴可以參考一下,希望對大家有所幫助2021-12-12