vue專案打包之後樣式與本地不一致

2022-05-25 04:15:12 字數 561 閱讀 4938

樣式不一致可以從一下幾點逐一排查

1.頁面裡面使用其他樣式元件, 要大量修改element裡面的css樣式,所以專案打包之後

會出現樣式和本地開發的時候樣式有很多不一樣,原因可能是css載入順序有問題,樣式被覆改了。

還有就是每個vue元件裡的style要加scoped,這很關鍵,起到css不被元件之間重疊的作用。

2.1點選f12檢視伺服器上的頁面樣式與本地樣式是否一致

2在本地檢視打包的樣式是否與伺服器上一致

遇到的問題:

頁面中引用了element樣式,根據需求修改下拉框元件的樣式,但是與scoped不能一起使用,我就沒有使用scoped,做第乙個頁面的時候沒有任何問題

當第二個頁面出現的時候,使用npm run dev 啟動的時候在本地沒有任何問題,但是在build打包之後兩個頁面使用的同樣的樣式名稱的地方開始衝突,**樣式就在這裡開始變化

後來把scoped 在頁面加上,把element修改的樣式單獨提出來引用就好了

vue專案,本地執行和build打包後樣式不同

最近在打包專案上傳到伺服器時,總是會出現奇奇怪怪的樣式,譬如 我本地用el menu做的二級選單分類,在本地可以正常顯示,打包上傳至伺服器出現異常,如下圖 本地正常顯示 打包後異常顯示 解決方案 檢視通過控制台檢視本地渲染後的樣式和伺服器渲染後的樣式,發現之前其他檔案中的el menu的樣式是全域性...

本地node服務啟動vue打包專案

下面有幾種辦法 假設你已經安裝了全域性的node.js。方法1 在站點目錄下開啟命令列輸入http server,執行結果如下 在瀏覽器中訪問 http localhost 8081 index.html就可以啦 方法2 1.可以使用如下server.js放到vue專案的根目錄下 引入檔案讀取模組 ...

將vue專案打包放到本地的express上

將vue專案打包放到本地的express上 第一步 全域性安裝expressnpm install g express如果執行express test的時候報錯 express不是內部或者外部命令 npm install g express generator解決方法 執行npm install g...