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