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

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

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

直接上代碼：

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

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

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

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

另外還有一些其他的辦法解決編譯后樣式不生效的問(wèn)題。在這里我一并說(shuō)一下，上面所說(shuō)的只是我遇到的狀況，也會(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 打包樣式與本地不符

問(wèn)題描述

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

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

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

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

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

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

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

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

意思是說(shuō)有的文件超出限制。得到這個(gè)線索打開(kāi)度娘翻到一個(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ù)器問(wèn)題解決

通往成功的路沒(méi)有捷徑。

總結(jié)

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

最新評(píng)論