vue+elementui項目打包后樣式變化問題的解決方法

這篇文章主要講解了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 (() [./~/_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 UglifyJs
Unexpected 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 UglifyJs
Unexpected 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 UglifyJs
Unexpected 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'),   //和下面截圖文件名字對應起來即可正常打包！！！
　　　　resolve('/node_modules/_element-ui@1.4.10@element-ui/packages')
 ]
}

看完上述內容，是不是對vue+elementui項目打包后樣式變化問題的解決方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。