解決vue+elementui專案打包後樣式變化問題
博主剛剛解決了index.html空白問題，剛開啟專案頁面又發現了樣式出現了大問題，樣式與開發版本有很大不同，有些樣式沒有生效。利用搜索引擎，
找到了問題所在以及解決辦法：
main.js中的引入順序決定了打包後css的順序，元件內的樣式沒有生效可能是被第三方元件樣式覆蓋了，所以把第三方元件放在前面引入，router放在後面引入，就可以實現元件樣式在第三方樣式之後渲染。
程式碼如下：
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'
//後引入router
import 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/>'
})
這樣修改之後樣式問題就解決了，打包後的版本與開發版本顯示一樣。
補充知識：element-ui打包的坑爹之處 ！！！必看三遍！！！
最近筆者打包element-ui出現如下問題：
ERROR in static/js/0.4cad92088cb8dc6e7afd.js from UglifyJs
Unexpected token: punc (() [./~/[email protected]@element-ui/packages/row/src/row.js:24,0][static/js/0.4cad92088cb8dc6e7afd.js:496,9]
ERROR in static/js/1.09dee4594487889c4524.js from UglifyJs
Unexpected token: punc (() [./~/[email protected]@element-ui/packages/row/src/row.js:24,0][static/js/1.09dee4594487889c4524.js:511,9]
ERROR in static/js/2.94e8ce8144ca11abff4c.js from UglifyJs
Unexpected token: punc (() [./~/[email protected]@element-ui/packages/row/src/row.js:24,0][static/js/2.94e8ce8144ca11abff4c.js:496,9]
ERROR in static/js/8.d374e413b093a5ae555a.js from UglifyJs
Unexpected token: operator (>) [./~/[email protected]@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/[email protected]@element-ui/src'),//和下面截圖檔名字對應起來即可正常打包！！！
resolve('/node_modules/[email protected]@element-ui/packages')
]
}
以上這篇解決vue+elementui專案打包後樣式變化問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。