Vue2.0 ES6語法降級ES5的操作
由於部分低版本的手機還不支援ES6語法,將會導致vue報錯。綜合了網上的各種辦法,我的專案現在終於成功降級ES5.
首先安裝外掛
npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader
編輯配置檔案
編輯/build/webpack.base.conf.js
編輯entry節點,變成如下
entry: { app: ['babel-polyfill','./src/main.js'] }
替換module.rules陣列中的
{ 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內容為
{ "presets": [ "es2015","stage-2" ],"plugins": [ ] }
如果使用了URLSearchParams,需要安裝npm install url-search-params-polyfill --save,然後在使用了該物件的類頭部引入import 'url-search-params-polyfill'
最後npm run build 編譯。
驗證是否成功
檢視dist目錄下編譯出來的js裡面是否還有const/let等ES6的語法,沒有的話基本就成功了。
補充知識:vue-cli3.x 元件es6 轉es5 失敗 導致低版本瀏覽器報錯
錯誤為 Uncaught SyntaxError: Unexpected token ...
這個問題網上看了很多解決方式 都沒發實現這個元件轉化成ES5
這個坑爹的元件就是 vue-superslide
來看一下他入口檔案的內容
// 匯入元件 import superslide from './superslide' // import superSlide from "./slide"; // import SuperSlideItem from "./slide-item"; // 儲存元件列表 const components = [superslide] // 定義 install 方法,接收 Vue 作為引數。如果使用 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 { // 匯出的物件必須具有 install,才能被 Vue.use() 方法安裝 install,// 以下是具體的元件列表 ...components }
真的是有es6語法 悲傷 整個專案只有這個元件沒有轉義成ES5 不明所以 還是要解決啊 我並沒有放棄它
解決方式 去node_modules資料夾下面找到,把它當一個靜態資源引入直接放在assets目錄下
原來外掛的引入方式是
import VueSuperSlide from 'vue-superslide'
Vue.use(VueSuperSlide)
現在的引入方式是
import VueSuperSlide from './assets/js/vue-superslide/packages/index.js'
Vue.use(VueSuperSlide)
這簡直的 LOW 到不行 但解決問題了 我忍一忍。
以上這篇Vue2.0 ES6語法降級ES5的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。