2

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ます。

何が足りないのか教えてください。

前もって感謝します。

4

2 に答える 2

1

全体的な解決策:

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"
  }
  ...

幸運を。

于 2017-01-06T04:07:38.150 に答える