vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名
更新時間：2022年05月24日 14:59:04 作者：zuo-yiran
這篇文章主要介紹了vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
修改打包配置實現(xiàn)代碼打包后的自定義命名
打包后文件
修改配置后打包為
首先修改router文件
例如，這是原本方法引用頁面：
//基礎(chǔ)配置 import BasicDispose from './pages/BasicDispose/BasicDispose'
現(xiàn)修改為：
const BasicDispose = () => import(/* webpackChunkName: "BasicDispose" */ './pages/BasicDispose/BasicDispose')
注：
/* webpackChunkName: “BasicDispose” */內(nèi)的BasicDispose是打包后的文件名，可以隨意命名，一般是同一文件內(nèi)的頁面認(rèn)為是一個模塊，打包成一個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,
?? ?//原始代碼設(shè)置
?? ?// 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內(nèi)關(guān)于圖片的修改如下圖所示修改對應(yīng)的路徑即可
命名修改如下
name: utils.assetsPath('img/[name].[ext]?v=[hash:7]')
圖片還有一種情況是
對于小圖片，是直接壓縮成base64編碼的圖片，這里可以手動修改limit的設(shè)置，這是極限大小的參數(shù)，小于極限參數(shù)會自動進(jìn)行壓縮，如果將limit的值設(shè)的很大，使所有的圖片都進(jìn)行壓縮的話，雖然不會涉及到路徑的問題，但是會使瀏覽器壓力很大,頁面的相應(yīng)時間會有影響。
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，文中的示例代碼講解詳細(xì)，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會的再不看要遭老罪咯2023-04-04
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結(jié)合實例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
vue + element動態(tài)多表頭與動態(tài)插槽
這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽，下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關(guān)資料展開文章的內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下，希望對大家有所幫助2021-12-12
這篇文章主要介紹了Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡單的樹形視圖實現(xiàn)的，在實現(xiàn)過程中熟悉了組件的遞歸使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
學(xué)習(xí)筆記之Vuex的用法總結(jié)(Vue狀態(tài)管理)
這篇文章主要介紹了學(xué)習(xí)筆記之Vuex的用法總結(jié)(Vue狀態(tài)管理)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05