1、 打開(kāi)index.html一片空白

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

assetsPublicPath: './'

2、ElementUI樣式丟失

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

1.main.js樣式引入順序問(wèn)題

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

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 }}),

因?yàn)閣ebpack編譯會(huì)發(fā)生css去重的問(wèn)題，在打包的過(guò)程時(shí)會(huì)過(guò)濾掉重復(fù)的css類(lèi)或樣式代碼，雖然有時(shí)候不重復(fù)的也會(huì)被過(guò)濾掉

3.添加使用范圍樣式

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

將所有<style>

修改為

<style scoped>

---

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

圖片:

可以看出圖標(biāo)樣式不能正常顯示
控制臺(tái)報(bào)錯(cuò)情況如下：
Failed to load resource: net::ERR_FILE_NOT_FOUND

4.顯示圖標(biāo)樣式

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)}

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。