Question

我正在迁移到vuejs 2，并且我的vue组件有一个非常奇怪的问题。当我需要（）一个组件时，我在webpack捆绑过程中收到以下错误：

ERROR in Unexpected token >

错误的行号是require（）调用加载组件的位置。

以下是我收到错误的测试组件示例：

<template>
    <div>
        <button>test</button>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {

            }
        }
    }
</script>

我的webpack.config.js文件是：

const webpack = require('webpack');
require('es6-promise').polyfill();
var path = require("path");

module.exports = {
    entry: {
        ...
    },
    output: {
        //path: path.join(__dirname, "./dist/js"),
        path: './',
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    devServer: {
        ...
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // make sure to exclude 3rd party code in node_modules
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    },
    resolveLoader: {
        root: __dirname + '/node_modules'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue'
        }
    }
};

非常感谢任何帮助。我已经被困了好几个小时了。

Answer 1

我实际想出来了。相反，我弄清楚出了什么问题以及如何解决它。基本上，webpack与任务运行器的视觉工作室集成不再适用于vue 2.我不知道为什么。但是，只需从命令行运行命令就可以完美运行，而且无论如何都要容易得多。

使用webpack

1 个答案: