前言

在公司項(xiàng)目發(fā)布上線后，出現(xiàn)了部分樣式失效的問(wèn)題。我們引用的是vuetify第三方庫(kù)，經(jīng)過(guò)檢查，發(fā)現(xiàn)是部分樣式被vuetify自帶的css樣式給覆蓋，原因是生成環(huán)境的打包模式與開(kāi)發(fā)環(huán)境不同。

打包模式的區(qū)別

• 生產(chǎn)模式（env.prod）

在生產(chǎn)模式下打包，項(xiàng)目會(huì)被最小化，所有的css代碼會(huì)被提取出來(lái)放在同一文件夾下（這也是上線后樣式出現(xiàn)問(wèn)題的根本原因）

• 開(kāi)發(fā)模式

開(kāi)發(fā)模式打包并不會(huì)改變項(xiàng)目的層次結(jié)構(gòu)，換句話說(shuō)，我們?cè)趯?xiě)代碼過(guò)程中，頁(yè)面長(zhǎng)啥樣，打包上線后就是原本的樣式，該模式下并不會(huì)改變代碼。但是該模式打包后的dist文件依舊比生產(chǎn)模式打包后的項(xiàng)目大很多。

案例

首先我們要知道為什么vuetify的樣式會(huì)覆蓋自定義樣式，因?yàn)樽远x的樣式優(yōu)先級(jí)不夠高！在生產(chǎn)模式下，所有css代碼會(huì)被提取到一個(gè)文件夾下，而第三方庫(kù)的css一般會(huì)多個(gè)類(lèi)名綁定（例如: .themelight .v-btn），如果自定義樣式只綁定一個(gè)類(lèi)名（沒(méi)有在父類(lèi)的作用域下），樣式優(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è)文件夾下。注意：開(kāi)發(fā)環(huán)境的extract選項(xiàng)默認(rèn)為false

const webpack = require('webpack')
module.exports = {
  css: {
    extract: false
  }
};

• 方案二：覆蓋第三方組件原有的類(lèi)，或者加樣式穿透

當(dāng)我們想修改第三方組件的樣式時(shí)，可以選擇覆蓋其原有的類(lèi)

<template>
   <div class="button-box">
      <v-btn>Submit</v-btn>
   </div>
</template>

<style lang="sass" scoped>
.button-box
  //v-btn是當(dāng)前組件已有的類(lèi)，在這里設(shè)置屬性可以覆蓋原有的
  .v-btn
    color:#020202   
</style>

也可使用>>>來(lái)提升樣式優(yōu)先級(jí)，俗稱(chēng)樣式穿透

<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，這里緊急解決問(wèn)題，可改為develop，以開(kāi)發(fā)環(huán)境的打包模式發(fā)布上線
NODE_ENV = 'develop'

總結(jié) 

到此這篇關(guān)于Vue項(xiàng)目打包問(wèn)題的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論