.vue 文件未按预期编译

Question

我正在尝试使用 Webpack 开发构建一个 Vue 项目。我在 App.vue 文件中添加 script 标签后，浏览器中出现错误 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"
  }
  ...

祝你好运。

.vue 文件未按预期编译

.vue files not compiling as expected

vue.js

babeljs

vue-loader

注：

整体解决方案：

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

2。在 `webpack config` 中，这里是 `loader configs` :

这是 `package.json` -

.vue 文件未按预期编译

.vue files not compiling as expected

vue.js

babeljs

vue-loader

注：

整体解决方案：

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

2。在 webpack config 中，这里是 loader configs :

这是 package.json -

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

2。在 `webpack config` 中，这里是 `loader configs` :

这是 `package.json` -