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