#?vue2.0 webpack 無法編譯 ES6 語法

之前在使用 vue 1.x 時用 vue-loader@8.0.0 版本可以正常打包vue的代碼，包括ES6語法也能正常轉為ES5語法，但是當使用 vue@2.0 + vue-loader@10.0.2 以后發現，通過 webpack 打包后的代碼里面的ES6語法沒有轉義，google一會后發現，需要在webpack.config.js里單獨配置babel的編譯規則。一個典型的配置如下：

var webpack = require('webpack'); var vue = require('vue-loader') var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {//插件項plugins: [new ExtractTextPlugin("[name].css")],//頁面入口文件配置entry: {index : './src/index.js'},//入口文件輸出配置output: {path: './dist/',filename: '[name].js'},module: {preLoaders: [{test: /\.vue$/,loader: 'eslint',include: '../',exclude: /node_modules/},{test: /\.js$/,loader: 'eslint',include: '../',exclude: /node_modules/}],//加載器配置loaders: [,{ test: /\.vue$/, loader: 'vue'},{ test: /\.js$/, loader: "babel",query: {presets: ['es2015']},exclude: /node_modules/ },{ test: /\.css$/, loader: ExtractTextPlugin.extract("css") },{ test: /\.less$/, loader: ExtractTextPlugin.extract("css!less") }]},vue : {loaders: {css: ExtractTextPlugin.extract("css"),less: ExtractTextPlugin.extract("css!less")},autoprefixer: { browsers: ["ios_saf >= 7", "android >= 4"] }},babel: {presets: ['es2015'],plugins: ['transform-runtime']} };

看到最后一個配置了嗎？需要單獨為babel配置編譯規則，vue-loader才能編譯ES6語法。

此方法在?vue@2.1.8 ,?vue-loader@10.0.2 是可行的。

?

謝謝

轉載于:https://www.cnblogs.com/xiaoniuzai/p/6286371.html

總結

以上是生活随笔為你收集整理的vue 2.0 无法编译ES6语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。