解決Vue-cli無法編譯es6的問題
最近使用vue-cli創(chuàng)建項目的時候,遇到es6無法轉換成es5的情況,項目在ios9下無法正常運行,在webpack.base.conf.js里面修改babel的配置項,添加src目錄也沒用,于是百度,谷歌找方法,最后自己想了想是不是沒有配置.babelrc文件,于是在項目根目錄創(chuàng)建.babelrc文件,同時在文件中編寫
{
"presets":
[
"env"
],
"plugins":
[
"transform-runtime"
]
}
于是es6語法成功編譯成es5,開心。
補充知識:vue cli2、cli3編譯(打包)后的chunk-vendors.js文件存在es6語法
剛踩過一個大坑,使用vue腳手架搭建的項目build后chunk-vendors.js文件一直存在es6語法,在即將崩潰的邊緣想到了一個方法,完美解決,
以下是解決步驟:
1.vue打包是不會編譯node_modules中的代碼,如果代碼中存在node_modules中的引用,build后就會直接合并代碼,不會被babel解析。
2.那么根源找到了,你要先找到node_modules中哪個包或者代碼沒有被babel,然后在webpack.base.conf.js 的 babel-loader中把這個包加入include就可以被babel解析了。
代碼如下:
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [
resolve("src"),
resolve("test"),
resolve("node_modules/webpack-dev-server/client"),
resolve("node_modules/webpack/lib/ModuleFilenameHelpers.js")
]
},
]
}
vue-cli3可參考官網(wǎng) webpack相關配置修改loader
以上這篇解決Vue-cli無法編譯es6的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue使用Element-UI實現(xiàn)分頁效果全過程
element-ui官網(wǎng)上有分頁實現(xiàn)的功能,簡單方便又好用,也有很多分頁的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關于Vue使用Element-UI實現(xiàn)分頁效果的相關資料,需要的朋友可以參考下2023-04-04

