Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
前言
在公司項(xiàng)目發(fā)布上線后，出現(xiàn)了部分樣式失效的問題。我們引用的是vuetify第三方庫，經(jīng)過檢查，發(fā)現(xiàn)是部分樣式被vuetify自帶的css樣式給覆蓋，原因是生成環(huán)境的打包模式與開發(fā)環(huán)境不同。
打包模式的區(qū)別
- 生產(chǎn)模式（env.prod）
在生產(chǎn)模式下打包，項(xiàng)目會(huì)被最小化，所有的css代碼會(huì)被提取出來放在同一文件夾下（這也是上線后樣式出現(xiàn)問題的根本原因）
- 開發(fā)模式
開發(fā)模式打包并不會(huì)改變項(xiàng)目的層次結(jié)構(gòu)，換句話說，我們?cè)趯懘a過程中，頁面長啥樣，打包上線后就是原本的樣式，該模式下并不會(huì)改變代碼。但是該模式打包后的dist文件依舊比生產(chǎn)模式打包后的項(xiàng)目大很多。
案例
首先我們要知道為什么vuetify的樣式會(huì)覆蓋自定義樣式，因?yàn)樽远x的樣式優(yōu)先級(jí)不夠高！在生產(chǎn)模式下，所有css代碼會(huì)被提取到一個(gè)文件夾下，而第三方庫的css一般會(huì)多個(gè)類名綁定（例如: .themelight .v-btn），如果自定義樣式只綁定一個(gè)類名（沒有在父類的作用域下），樣式優(yōu)先級(jí)不夠高，就會(huì)被覆蓋。
解決方案
- 方案一：配置vue.config.js文件
在
vue.config.js文件中將css的extract設(shè)置為false，生產(chǎn)環(huán)境打包默認(rèn)為true，這個(gè)選項(xiàng)會(huì)把css代碼提取到一個(gè)文件夾下。注意：開發(fā)環(huán)境的extract選項(xiàng)默認(rèn)為false
const webpack = require('webpack')
module.exports = {
css: {
extract: false
}
};
- 方案二：覆蓋第三方組件原有的類，或者加樣式穿透
當(dāng)我們想修改第三方組件的樣式時(shí)，可以選擇覆蓋其原有的類
<template>
<div class="button-box">
<v-btn>Submit</v-btn>
</div>
</template>
<style lang="sass" scoped>
.button-box
//v-btn是當(dāng)前組件已有的類，在這里設(shè)置屬性可以覆蓋原有的
.v-btn
color:#020202
</style>
也可使用
>>>來提升樣式優(yōu)先級(jí)，俗稱樣式穿透
<template>
<div class="button-box">
<v-btn class="submit-btn">Submit</v-btn>
</div>
</template>
<style lang="sass" scoped>
.button-box >>> .submit-btn
color: #020202
</style>
- 方案三：該方案用于解決緊急情況下需要發(fā)布上線（并不能縮小打包后的體積）
在.env.production文件中修改環(huán)境變量
// 本應(yīng)該是production，這里緊急解決問題，可改為develop，以開發(fā)環(huán)境的打包模式發(fā)布上線 NODE_ENV = 'develop'
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包問題的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
Vue2和Vue3在v-for遍歷時(shí)ref獲取dom節(jié)點(diǎn)的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時(shí)ref獲取dom節(jié)點(diǎn)的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
使用el-form-item設(shè)置標(biāo)簽長度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細(xì)介紹Vue組件選項(xiàng)props,需要的朋友可以參考下2017-08-08
Ant Design Vue日期組件的時(shí)間限制方式
這篇文章主要介紹了Ant Design Vue日期組件的時(shí)間限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法案例代碼
這篇文章主要介紹了在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法,包含具體代碼，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的方法
這篇文章主要給大家介紹了關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,前端使用這個(gè)插件可以方便展現(xiàn)出json格式的數(shù)據(jù),下載引入使用代碼可直接使用,需要的朋友可以參考下2024-05-05