Question

注意：在将此标记为重复之前，我已经查看了一些解决方案但它们不起作用：

[1] https://github.com/webpack/webpack-dev-server/issues/135
[2] https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-
此处很少有其他Unexpected token <个帖子，但它们（可能）不相关。

我正在尝试将VueJS集成到OSS聊天应用程序https://github.com/zulip/zulip中。我尝试使用vue-loader中的标准配置模板，其中包括单文件组件和热重载，但是当我尝试运行服务器时，我收到此错误：

...
ERROR in ./static/js/components/sidebar.vue
Module parse failed: /srv/zulip/static/js/components/sidebar.vue Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         {{ msg }}
 @ ./static/js/src/main.js 3:14-50
...

这是webpack配置：

var webpack = require('webpack')

module.exports = {
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:9991/socket.io',
        './static/js/src/main.js',
    ],
    devtool: 'eval',
    output: {
        publicPath: 'http://0.0.0.0:9991/webpack/',
        path: './static/js',
        filename: 'bundle.js',
    },
    devServer: {
        port: 9994,
        stats: "errors-only",
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000,
        },
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
};

的信息：

第一个链接建议添加一个明确的公共路径，但这已在我之前完成。
代码中运行了一些服务器，包括主应用服务器的django和推送事件的龙卷风。
应用程序仅在开发主机（vagrant）之外公开端口9991。 webpack-dev-server使用9994但被重定向到localhost：9991 / webpack /

您可以在此处查看更改：https://github.com/tommyip/zulip/commit/97cf122bda0f7dc09f6c8c3062c55871c315459e

Answer 1

我错过了其中一个关键信息，即Webpack的版本。

Vue和vue-loader网站上显示的示例使用Webpack 2 API，这与Webpack 1略有不同：

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },

Rules实际上是Webpack 1中的loaders。

“意外的令牌＆lt;”用于运行Webpack的VueJS

1 个答案: