vue.js - .vue 文件未按预期编译

Question

我正在尝试使用Webpack开发构建一个Vue 项目。一旦我在文件中添加标签，我就会在浏览器中收到一条错误消息。scriptApp.vueUnexpected 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"
  }
  ...

祝你好运。