解決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專案打包後樣式變化問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。