使用 Webpack 运行的 VueJS 的“意外令牌 <”

Posted 2023-02-16

【中文标题】使用 Webpack 运行的 VueJS 的“意外令牌 <”

【英文标题】："Unexpected token <" for VueJS running with Webpack

【发布时间】：2017-06-10 18:40:02

【问题描述】：

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

[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 和用于推送事件的 tornado。

该应用仅在开发主机（vagrant）之外公开​​端口 9991。 webpack-dev-server 使用 9994 但被重定向到 localhost:9991/webpack/

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

【问题讨论】：

能不能看看/srv/zulip/static/js/components/sidebar.vue的内容看看或者分享一下

看看我发布的 github 提交，它包括我为集成 VueJS 所做的所有更改。

您仍在使用 webpack 1 语法进行模块配置。你确定这不会引起问题吗？ Webpack 2 语法是 test: /\.vue$/, use: [ loader: 'vue-loader']

@connexo 是的，这就是问题所在，我在下面的答案中发布了解决方案。

【参考方案1】：

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

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

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

Rules 在 Webpack 1 中实际上是 loaders。