博主剛剛解決了index.html空白問(wèn)題，剛打開(kāi)項(xiàng)目頁(yè)面又發(fā)現(xiàn)了樣式出現(xiàn)了大問(wèn)題，樣式與開(kāi)發(fā)版本有很大不同，有些樣式?jīng)]有生效。利用搜索引擎，

找到了問(wèn)題所在以及解決辦法：

main.js中的引入順序決定了打包后css的順序，組件內(nèi)的樣式?jīng)]有生效可能是被第三方組件樣式覆蓋了，所以把第三方組件放在前面引入，router放在后面引入，就可以實(shí)現(xiàn)組件樣式在第三方樣式之后渲染。

代碼如下：

main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ’vue’import App from ’./App’//先引入第三方組件import ElementUI from ’element-ui’import ’element-ui/lib/theme-chalk/index.css’//后引入routerimport router from ’./router’import store from ’./vuex/store’Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: ’#app’, router, store, components: { App }, template: ’<App/>’})

這樣修改之后樣式問(wèn)題就解決了，打包后的版本與開(kāi)發(fā)版本顯示一樣。

補(bǔ)充知識(shí)：element-ui打包的坑爹之處 ！！！必看三遍?。?！

最近筆者打包element-ui出現(xiàn)如下問(wèn)題：

ERROR in static/js/0.4cad92088cb8dc6e7afd.js from UglifyJsUnexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/0.4cad92088cb8dc6e7afd.js:496,9]

ERROR in static/js/1.09dee4594487889c4524.js from UglifyJsUnexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/1.09dee4594487889c4524.js:511,9]

ERROR in static/js/2.94e8ce8144ca11abff4c.js from UglifyJsUnexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/2.94e8ce8144ca11abff4c.js:496,9]

ERROR in static/js/8.d374e413b093a5ae555a.js from UglifyJsUnexpected token: operator (>) [./~/_element-ui@1.4.10@element-ui/src/mixins/emitter.js:2,0][static/js/8.d374e413b093a5ae555a.js:89,32]

Build failed with errors.

解決：找到node_modules目錄下面的element-ui目錄的名字在build下面的------->webpack.base.conf.js里面配置：

{ test: /.js$/, loader: ’babel-loader’, include: [resolve(’src’),resolve(’test’),resolve(’/node_modules/_element-ui@1.4.10@element-ui/src’), //和下面截圖文件名字對(duì)應(yīng)起來(lái)即可正常打包?。?！resolve(’/node_modules/_element-ui@1.4.10@element-ui/packages’) ]}

以上這篇解決vue+elementui項(xiàng)目打包后樣式變化問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。