Vue 项目报错:Uncaught SyntaxError: Unexpected token ‘<‘

问题:最近做vue项目时,当我访问二级路由的时候,就会报Uncaught SyntaxError: Unexpected token ‘<‘错误,而我访问一级路由不会报错。翻了网上很多资料,都无法解决。

一、public下的index.html没有引入其他外部js文件。

解决方法:清除浏览器缓存。

二、 public下的index.html引入其他外部js文件。

原因一.引用文件的位置不正确

js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之:

   1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。

   2.static用来放没有npm包的第三方插件,字体文件。

   3.assets与components同级  components下的.vue引用静态文件时,相对路径为 ../assets/xxx/......

   说明:如果js文件中包含es6语法的话,就不可以放在static文件夹下,因为static文件夹默认是不会被打包和编译的,所以引用的时候会抛异常。

不同之处可以查看这篇博客:https://www.cnblogs.com/huangqiao/p/7798887.html

解决方法:

将src下的文件放到static下面去,在indec.html中的引用路径采用相对路径的表现形式,“./static/xxx/xxxxx.js”

原因二:配置信息不正确

如果你的js文件中包含es6语法,但没有配置采用babel-loader来解析和转化为es5语法的话,也会报这个错误。

解决方法:

需要在webpack.config.js里配置loader,vue-cli是不会帮忙配置的。

然后重新编译项目,就可以解决,当然这个也没有解决我的问题。

原因三:script的引入类型不对

解决办法:将type="text/javascript"改为type="text/babel"

我尝试了,不会再报以上错误,但是我引入的JS文件中的内容却没有编译成功,里面的方法依然无法使用。

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 在使用Antd Vue框架时,如果在项目进行打包后,出现“Uncaught SyntaxError: Unexpected token '<'”的错误提示,一般是由于vue-router在使用history路由模式时,找不到打包后的index.html文件而引起的。 解决这个问题可以通过配置nginx服务器,来确保vue-router能够正确地访问到index.html文件。首先需要找到nginx服务器的配置文件(一般是nginx.conf),然后在相应的location中添加如下代码: location / { try_files $uri $uri/ /index.html; } 这段代码的作用是当访问某个路由时,如果找不到对应的文件,则会自动定向到index.html文件。这样就可以确保当使用history路由模式时,vue-router能够正确地访问到index.html文件,从而解决“Uncaught SyntaxError: Unexpected token '<'”的问题。 除了nginx服务器,也可以在vue.config.js中的config属性中配置publicPath为“./”,参考代码如下: module.exports = { publicPath: './', } 这样修改后,再进行打包,也可以解决上述问题。 ### 回答2: antd vue 项目打包后出现 "uncaught syntaxerror: unexpected token '<" 的错误,一般情况下是由于打包后的文件没有被正确加载引起的。 首先,可以通过查看浏览器的控制台输出,找到具体的报错位置。一般情况下,报错位置会指向打包后的 js 或 css 文件。 其次,可以检查打包配置文件,例如 webpack.config.js 文件中的配置是否正确。特别是在使用 antd vue 进行项目开发时,需要注意引入对应的 babel 插件,以确保代码能够正确编译。 除此之外,还需要检查打包后的文件路径是否正确。在 vue-cli 3.0 以上版本中,可以通过设置 publicPath 参数来指定打包后的文件路径,以确保文件能够被正确加载。同时,在部署项目时,也需要确保服务器的静态资源路径与打包后的文件路径一致。 最后,如果上述方法都没有解决问题,可以考虑使用 source-map 进行调试,以方便定位问题所在。具体可参考文档: - https://webpack.docschina.org/configuration/devtool/ - https://www.jianshu.com/p/8c6366f53b77 综上所述,出现 "uncaught syntaxerror: unexpected token '<" 错误,常见原因是文件未被正确加载或打包配置错误,解决方法包括检查配置文件、文件路径和调试等。 ### 回答3: 在使用Ant Design for Vue进行项目开发时,我们通常会使用Vue CLI进行项目打包。然而,在打包完成后,可能会出现类似于“uncaught syntaxerror: unexpected token '<”这样的错误。 出现这样的错误是由于浏览器无法识别打包后的JavaScript代码,而更准确地说是因为浏览器无法识别HTML的语法格式。在Webpack将Vue应用打包成单个文件时,将所有的HTML标签和JavaScript代码合并在一起,并且没有正确设置Content-Type标头。 解决这个问题有两种方法: 第一种方法是通过在Webpack配置中添加设置来解决。我们可以在Vue CLI项目中添加一个vue.config.js文件,并将以下代码添加到其中: ``` module.exports = { devServer: { headers: { 'Access-Control-Allow-Origin': '*' } }, chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.transformAssetUrls = { img: 'src', image: 'xlink:href', 'b-avatar': 'src', 'b-img': 'src', 'b-img-lazy': ['src', 'blank-src'], 'b-card': 'img-src', 'b-card-img': 'src', 'b-card-img-lazy': ['src', 'blank-src'], 'b-carousel-slide': 'img-src', 'b-embed': 'src' } return options }) } } ``` 这段代码中的关键是"headers: { 'Access-Control-Allow-Origin': '*' }",它是用来设置跨域访问头信息的,这样浏览器就能够正确识别打包后的JavaScript代码。同时,这段代码还会改变图片的路径,防止加载图片时报错。 第二种方法是将打包后的文件上传到服务器,并在服务器上设置Content-Type标头为text/html。这种方法比较麻烦,但是如果你的应用需要部署到生产环境中,这可能是必要的。 总的来说,解决“unexpected token '<”这个错误的关键是确保浏览器能够正确地识别打包后的JavaScript代码,我们需要做一些额外的配置以达到这个目的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值