vue項目build打包后部分樣式錯亂

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

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

直接上代碼：

其實只需簡單兩步就OK。

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

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

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

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

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

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

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

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

問題描述

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

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

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

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

因為數(shù)據(jù)庫和后臺都是一致的，所以問題鎖定在前端部分。

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

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

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

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

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

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

通往成功的路沒有捷徑。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論