Vue2.0 ES6語法降級ES5的操作

更新時(shí)間：2020年10月30日 09:15:25 作者：左森

這篇文章主要介紹了Vue2.0 ES6語法降級ES5的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

由于部分低版本的手機(jī)還不支持ES6語法，將會(huì)導(dǎo)致vue報(bào)錯(cuò)。綜合了網(wǎng)上的各種辦法，我的項(xiàng)目現(xiàn)在終于成功降級ES5.

首先安裝插件

npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader

編輯配置文件

編輯/build/webpack.base.conf.js

編輯entry節(jié)點(diǎn)，變成如下

entry: {
  app: ['babel-polyfill', './src/main.js']
}

替換module.rules數(shù)組中的

{
    test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    }

為

{
    test: /\.js$/,
    exclude: /node_modules/, // 處理除了nodde_modules里的js文件
    loader: 'babel-loader'
}

再根目錄新建.babelrc內(nèi)容為

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": [

 ]
}

如果使用了URLSearchParams，需要安裝npm install url-search-params-polyfill --save，然后在使用了該對象的類頭部引入import 'url-search-params-polyfill'

最后npm run build 編譯。

驗(yàn)證是否成功

查看dist目錄下編譯出來的js里面是否還有const/let等ES6的語法，沒有的話基本就成功了。

補(bǔ)充知識：vue-cli3.x 組件es6 轉(zhuǎn)es5 失敗導(dǎo)致低版本瀏覽器報(bào)錯(cuò)

錯(cuò)誤為 Uncaught SyntaxError: Unexpected token ...

這個(gè)問題網(wǎng)上看了很多解決方式都沒發(fā)實(shí)現(xiàn)這個(gè)組件轉(zhuǎn)化成ES5

這個(gè)坑爹的組件就是 vue-superslide

來看一下他入口文件的內(nèi)容

// 導(dǎo)入組件
import superslide from './superslide'
// import superSlide from "./slide";
// import SuperSlideItem from "./slide-item";
 
// 存儲(chǔ)組件列表
const components = [superslide]
 
// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function(Vue) {
 // 判斷是否安裝
 if (install.installed) return
 // 遍歷注冊全局組件
 components.map(component => Vue.component(component.name, component))
}
 
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
 
export default {
 // 導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝
 install,
 // 以下是具體的組件列表
 ...components
}

真的是有es6語法悲傷整個(gè)項(xiàng)目只有這個(gè)組件沒有轉(zhuǎn)義成ES5 不明所以還是要解決啊我并沒有放棄它

解決方式 去node_modules文件夾下面找到，把它當(dāng)一個(gè)靜態(tài)資源引入直接放在assets目錄下

原來插件的引入方式是