.vue文件没有按预期编译

Question

我正在尝试使用 Webpack 开发 Vue项目。我在script文件中添加App.vue代码后，我在浏览器中收到错误Unexpected token export。

//App.vue
<template>
    <p style="background-color:blue,">Hello World!</p>
</template>

<!-- works perfectly fine without this script tag -->
<script>
    export default {
        name    : 'app'
    }
</script>

<style>
    h1 {
        color               : white;
        background-color    : darkgreen
    }
</style>

webpack配置：

//webpack.config.js
const HTMLPlugin    = require('html-webpack-plugin')
const webpack       = require('webpack')
//
const BabelLoader = {
    loader  : 'babel',
    test    : /\.js$/,
    exclude : /node_modules/,
    query   : {
        presets : [ 'es2015', 'stage-2'],
        plugins: [ 'transform-runtime' ]
    }
}
const VueLoaderConfig = {
    loader  : 'vue',
    test    : /\.vue$/,
    exclude : /node_module/
}
//
const HTMLPluginConfig      = new HTMLPlugin({
            template    : './src/index.html'
        })
const CommonsChunkConfig    = new webpack.optimize.CommonsChunkPlugin({
    name    : [ 'vendor', 'bootstrap' ]
})
//
const config    = {
    // ENTRY
    entry   : {
        app     : './src/app.js',
        vendor  : [ 'vue' ]
    },  
    // OUTPUT
    output  : {
        filename    : '[name].[chunkhash].js',
        path        : __dirname + '/dist'
    },
    // PLUGINS
    plugins : [
        HTMLPluginConfig,
        CommonsChunkConfig
    ],
    // MODULE
    module  : {
        loaders : [
            BabelLoader,
            VueLoaderConfig
        ]
    }
}
//
module.exports = config

切入点 - app.js

//app.js
import Vue from 'vue'
//
import App from './App.vue'
//
new Vue({
    el          : '#app',
    ...App
})

注意：

• 在<script>文件中添加App.vue标记之前，它完全正常。

请告诉我我可能缺少什么。

提前致谢。

Answer 1

我认为这是因为您使用的是stage-2预设，而export扩展程序属于stage-1的一部分，而stage-2中未包含此扩展程序，所以你可以使用stage-1：

npm install --save-dev babel-preset-stage-1

presets : [ 'es2015', 'stage-1']

完全删除舞台预设，或只使用module.exports。

Answer 2

整体解决方案：

1。安装webpack2（因为某些功能不适用于webpack-1）

npm i -D webpack@2.2.0-rc.3

2。在webpack config中，这是loader configs：

const BabelLoaderConfig 
    = {
        loader  : 'babel-loader',
        test    : /\.js$/,
        exclude : /node_modules/,
        query   : {
            presets : [ 'latest', 'stage-2' ]
        }
    }
const VueLoaderConfig 
    = {
        loader  : 'vue-loader',
        test    : /\.vue$/,
        exclude : /node_modules/
    }

以下是package.json -

中完整的依赖项列表

...
"devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-runtime": "^6.20.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.26.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.2.0-rc.3"
  }
  ...

祝你好运。