快捷導(dǎo)航

vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決

更新時(shí)間：2023年07月19日 14:20:41 作者：迷彩湃

這篇文章主要介紹了vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目build打包后部分樣式錯(cuò)亂

我在做一個(gè)頁面加載loading 效果的時(shí)候，改了很多樣式，有全局的有私有的,以至于到最后把自己都搞亂了不知道改過什么東西，最后在build打包上線后出現(xiàn)了部分樣式顯示錯(cuò)亂（主要是全局樣式），影響到了整個(gè)頁面，當(dāng)時(shí)都懵了，怎么也找不到問題。墨跡到了晚上九點(diǎn)鐘。

在網(wǎng)上查了很多資料。最終解決，特意在這里記錄一下，發(fā)現(xiàn)網(wǎng)上關(guān)于這種問題的回答挺少的所以我找了好久，希望我的回答可以貢獻(xiàn)一點(diǎn)力量，讓同樣遇到這個(gè)問題的小伙伴不迷茫。

直接上代碼：

其實(shí)只需簡(jiǎn)單兩步就OK。

1，在build 文件夾下 webpack.prod.conf.js 中 plugins 數(shù)組注釋掉這句話

2，同樣在utils.js 中 cssLoader 中加上 minimize: true

這樣再build打包試試，遇到這種問題的主要原因是：build在打包的時(shí)候會(huì)把js,css文件一起打包這樣就會(huì)把重復(fù)的樣式覆蓋掉，所以我在app.vue里面寫的全局樣式就遭了殃，被玷污了！哈哈。

另外還有一些其他的辦法解決編譯后樣式不生效的問題。在這里我一并說一下，上面所說的只是我遇到的狀況，也會(huì)有一些其他的場(chǎng)景也會(huì)導(dǎo)致樣式不生效。

1，main.js 入口文件樣式引入要有西安后續(xù)順序，樣式文件應(yīng)該稍微往前放放，比如像這樣，把a(bǔ)pp 和router 放在后面去。

2，在組件中的樣式加上 scoped 屬性，讓樣式只在當(dāng)前組件中生效。

3，最后一個(gè)方法就比較費(fèi)力了，是個(gè)體力活。找到被污染的樣式手動(dòng)修改，權(quán)重不夠提高權(quán)重多嵌套幾層選擇器，也可以加上！important

vue使用npm run build 打包樣式與本地不符

問題描述

系統(tǒng)中集成Activiti 工作流時(shí)，發(fā)現(xiàn)編輯頁面與本地開發(fā)環(huán)境顯示不符，

本地開發(fā)環(huán)境：

服務(wù)器生產(chǎn)環(huán)境：

本地環(huán)境可以顯示各種工具，服務(wù)器就很短。F12查看按鈕其實(shí)是有的。

因?yàn)閿?shù)據(jù)庫和后臺(tái)都是一致的，所以問題鎖定在前端部分。

猜測(cè)是node版本問題，換版本也不行。用同事電腦打包也是一個(gè)效果。

由于個(gè)人開發(fā)久了有個(gè)老毛病，只看error 不看warning，相信很多老程序員都會(huì)有這個(gè)問題。

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

意思是說有的文件超出限制。得到這個(gè)線索打開度娘翻到一個(gè)帖子復(fù)制粘貼大法

configureWebpack: config => {
    // 為生產(chǎn)環(huán)境修改配置...
    if (process.env.NODE_ENV === 'production') {
      config.mode = 'production';
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000
      }
    }
  },

重新打包后警告消失發(fā)布服務(wù)器問題解決

通往成功的路沒有捷徑。