Vue CLI - Uncaught SyntaxError: Unexpected token <

当使用Vue CLI构建项目时，你可能会遇到这个错误：Uncaught SyntaxError: Unexpected token <。

什么是Uncaught SyntaxError: Unexpected token <？

这个错误通常出现在浏览器的控制台中，它的意思是在解析JavaScript代码时遇到了意外的字符"<"，"<"实际上是小于号"<"的HTML实体编码。

这个错误通常出现在你加载JavaScript文件时，服务器返回了一个HTML文件而不是预期的JavaScript文件。这种情况通常发生在使用Vue CLI时，因为它生成的JavaScript文件名通常以".html"结尾，而不是".js"。

如何解决Uncaught SyntaxError: Unexpected token <？

要解决这个错误，你需要确保你正在加载的文件是合法的JavaScript文件。

在Vue CLI中，你可以使用以下方法来确保你加载的是正确的JavaScript文件：

1. 修改你的vue.config.js文件，在output中指定正确的文件类型：

module.exports = {
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    libraryTarget: 'umd'
  }
}

2. 在使用html-webpack-plugin插件时，将script标签的type属性设置为"text/javascript"：

new HtmlWebpackPlugin({
  template: 'public/index.html',
  filename: 'index.html',
  inject: true,
  scriptLoading: 'blocking',
  hash: true,
  scriptAttributes: {
    type: 'text/javascript'
  },
}),

结论

Uncaught SyntaxError: Unexpected token <错误常常是由于加载错误的文件类型引起的。在Vue CLI中，你可以很容易地通过指定正确的文件类型或修改插件选项来解决这个问题。