vue腳手架搭建項目的兼容性配置詳解
更新時間：2018年07月17日 11:10:30 作者：十月秋
這篇文章主要介紹了vue腳手架搭建項目的兼容性配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用vue-cli搭建項目，面臨著解決ie兼容性問題(ie9+)，因為ie瀏覽器并不支持es6語法等。
首先安裝babel-polyfill，解決ie不支持promise對象的問題
npm install --save-dev babel-polyfill
安裝成功之后,在main.js第一行引入
import 'babel-polyfill'
安裝引入成功之后，如果項目還不能正常運行
則需要安裝babel進行解析
（推薦阮一峰老師的文章http://www.fzitv.net/article/141931.htm）
我自己是安裝了babel-preset-es2015和babel-preset-stage-2
在.babelrc里面進行配置
{
"presets": ["stage-2","es2015"],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
然后在webpack.base.config.js進行配置
腳手架搭建的項目里面都有這個方法：
function resolve(dir) {
return path.join(__dirname, dir)
}
在module里配置需要進行編譯的文件夾(如下)
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('../src'), resolve('../config'),
resolve('../libs'), resolve('../node_modules/iview')
],
query: {
presets: ['es2015']
}
},
]
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了nuxt.js框架使用小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了keep-alive不能緩存多層級路由菜單問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue中如何動態(tài)獲取剩余區(qū)域的滾動高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文主要介紹了Vue3刷新頁面報錯404的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
今天我們來學(xué)習(xí)一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助2022-07-07
vue實現(xiàn)div可拖動位置也可改變盒子大小的原理
這篇文章主要介紹了vue實現(xiàn)div可拖動位置也可改變盒子大小，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue elementUI el-form 數(shù)據(jù)無法賦值且不報錯的問題及解決方法
vue項目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個問題遍歷的字段可以修改值但是確定的幾個字段無法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無法賦值且不報錯的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
Element?UI表單驗證規(guī)則動態(tài)失效問題的解決辦法
這篇文章主要給大家介紹了關(guān)于Element?UI表單驗證規(guī)則動態(tài)失效問題的解決辦法,Element UI提供了強大的表單驗證功能,可以輕松地對表單進行驗證,需要的朋友可以參考下2023-09-09