1、 打開index.html一片空白

參考：鏈接: link.
修改build對象里的assetsPublicPath為’./’

assetsPublicPath: './'

2、ElementUI樣式丟失

參考：鏈接: link.
這里嘗試完前三種：

1.main.js樣式引入順序問題

調整了import的順序（可能是被第三方組件樣式覆蓋了，router放在最后引入，就可以實現組件樣式在第三方樣式之后渲染）

import Vue from 'vue' import App from './App' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/assets/css/reset.css' import myBread from '@/components/cuscom/myBread.vue' import router from './router' import http from '@/plugins/http.js' import moment from 'moment'

2.注釋/build/webpack.prod.conf.js文件的代碼

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),

因為webpack編譯會發生css去重的問題，在打包的過程時會過濾掉重復的css類或樣式代碼，雖然有時候不重復的也會被過濾掉

3.添加使用范圍樣式

scoped是H5的新特性，它限制樣式只適用于當前組件，避免組件間的樣式干擾。

將所有<style>

修改為

<style scoped>

---

以上三步完成以后，頁面能展示部分樣式，效果如下：

圖片:

可以看出圖標樣式不能正常顯示
控制臺報錯情況如下：
Failed to load resource: net::ERR_FILE_NOT_FOUND

4.顯示圖標樣式

webpack utils.js 修改：（build目錄下utils.js）
添加 publicPath: ‘…/…/’

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

終于，所有樣式都正常了 😃

總結

以上是生活随笔為你收集整理的部署项目的问题（一）—— vue工程打包上线样式错乱问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。