"意外令牌<<<用于与 Webpack 一起运行的 VueJS [英] "Unexpected token <" for VueJS running with Webpack

问题描述

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

Note: Before you mark this as a duplicate, I have looked at a few solutions and they don't work:

• [1] https://github.com/webpack/webpack-开发服务器/问题/135

• [2] https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-

这里很少有其他 意外令牌 < 线程，但它们(可能)无关.

Few other Unexpected token < threads here but they are (probably) unrelated.

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

I am trying to integrate VueJS into an OSS chat application https://github.com/zulip/zulip . I tried to use the standard configuration template from vue-loader which includes single-file-components and hot reload, but when I try to run the server, I get this error:

...
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 配置:

This is the webpack config:

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]'
                }
            }
        ]
    }
};

信息:

• 第一个链接建议添加一个明确的公共路径，但这已经在我之前完成了.

• The first link suggest adding a explicit public path, but that is already done before me.

代码中运行了一些服务器，包括用于主应用服务器的 django 和用于推送事件的 Tornado.

There are a few servers running in the code, including django for the main app server and tornado for push events.

该应用程序仅在开发主机 (vagrant) 之外公开端口 9991.webpack-dev-server 使用 9994 但重定向到 localhost:9991/webpack/

The app only exposes port 9991 outside of the development host (vagrant). The webpack-dev-server uses 9994 but is redirected to localhost:9991/webpack/

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

You can see the changes here: https://github.com/tommyip/zulip/commit/97cf122bda0f7dc09f6c8c3062c55871c315459e

推荐答案

我漏了一个关键信息，就是Webpack的版本.

I missed one of the key information, which is the version of Webpack.

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

The examples shown in Vue and vue-loader's website uses Webpack 2 API, which is slightly different to Webpack 1:

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

Rules 实际上是 Webpack 1 中的 loaders.

Rules is actually loaders in Webpack 1.

这篇关于"意外令牌<<<用于与 Webpack 一起运行的 VueJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！