vue项目部署到线上报 Uncaught SyntaxError: Unexpected token ‘＜‘

最新推荐文章于 2025-03-19 16:03:52 发布

韩大璐

最新推荐文章于 2025-03-19 16:03:52 发布

阅读量4.9k

点赞数 2

分类专栏： vue 文章标签： vue webpack vue-cli 打包报错

本文链接：https://blog.youkuaiyun.com/weixin_41257563/article/details/109238805

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

在从主平台跳转到Vue子平台时，页面显示为空白，控制台出现3个'UncaughtSyntaxError: Unexpected token '<>'错误。问题源于引用的.js文件实际返回了html内容。解决方案是检查外部文件路径的正确性，并修改webpack配置文件output的文件名格式，确保文件hash值更新后能被nginx正确找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bug描述：该项目作为一个平台的子平台存在，根据nginx路由分发实现路由跳转。在从主平台跳转到该子平台的时候，页面一片空白，在控制台有3个报错，报错内容均为：

Uncaught SyntaxError: Unexpected token ‘<’

点开报错详情，发现文件类型为XXX.js文件，实际内容为一个html文件

此类型错位一般为期待一个js文件，实际返回一个html文件导致

解决方式：

查看引用外部文件的路径是否正确
vue-cli默认build后的文件格式为：js/[name].[chunkhash].js，每次npm run build之后有改动的文件的hash值都会改变，上传后nginx无法找到最新上传的文件，所以默认返回了index.html文件里的内容，我们的文件后缀名是.js，所以自然无法识别的内容，导致抛出“Uncaught SyntaxError: Unexpected token ‘<’”
尝试修改 build/webpack.prod.conf.js 文件中 output输出的文件名格式

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name]_[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id]_[chunkhash].js')
},