Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

目录
  • 问题：
  • 一、public下的index.html没有引入其他外部js文件。
  • 二、 public下的index.html引入其他外部js文件。
    • 原因一.引用文件的位置不正确
    • 原因二：配置信息不正确
    • 原因三：script的引入类型不对
  • 总结

问题：

最近做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文件中的内容却没有编译成功，里面的方法依然无法使用。

总结

到此这篇关于Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'解决的文章就介绍到这了,更多相关Uncaught SyntaxError: Unexpected token '＜'内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue项目报错：Uncaught SyntaxError: Unexpected token <

    遇到问题: 今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题: 控制台的提示:Uncaught SyntaxError: Unexpected token < 按照提示进入文件,再看如下图: 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的. 解决方案: 解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<scr

  • vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed. 报错截图 问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token < 报错截图: 经过一番折腾,初步定位问题1

  • 解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    一.第一个解决方法是把mode改成history这个问题就会消失 二.第二个解决方法是publicPath设置成’/’,不能是’./’ const publicPath=''; module.exports = { // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/' publicPath: `/${publicPath}` }; 三.报错404 Not Found,请重写url 在IIS正常部署完v

  • Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    目录 问题: 一.public下的index.html没有引入其他外部js文件. 二. public下的index.html引入其他外部js文件. 原因一.引用文件的位置不正确 原因二:配置信息不正确 原因三:script的引入类型不对 总结 问题: 最近做vue项目时,当我访问二级路由的时候,就会报Uncaught SyntaxError: Unexpected token ‘<‘错误,而我访问一级路由不会报错.翻了网上很多资料,都无法解决. 一.public下的index.html没有引入其

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • Vue项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    目录 Vue项目报错:parseComponent 报错内容 解决步骤 Vue常见错误及解决办法 1.在配置路由并引入组件后 2.在组件中的标签和样式中图片路径出错时 3.在组件中标签没有闭合 4.在使用less定义变量是报错 本地开发环境请求服务器接口跨域的问题 Vue项目报错:parseComponent 报错内容 ERROR  Failed to compile with 1 error                                                    

  • JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法

    JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法

    本文实例讲述了JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法.分享给大家供大家参考,具体如下: Uncaught SyntaxError: Unexpected token ILLEGAL 未捕获的语法错误: 意想不到的非法令牌 如下图所示: 复制代码 代码如下: <input id="btn_0_4EAE4F474C91156086C0D4EA7E983C69C215B649" type="butt

  • JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法

    本文实例讲述了JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法.分享给大家供大家参考,具体如下: Uncaught SyntaxError: Unexpected token ) 以下代码引发了此异常: <div class="Hd_live_Sharediv left"> <a href="javascript:void()" onclick="loadLivePlayer('ud

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339）

    问题描述: 今天早上一开机,打开项目,发现项目一片醒目的红色,查看报错原因提示: Property 'xxxx' does not exist on type 'CombinedVueInstance<{ readyOnly: unknown; businessPrice: unknown; travelStaffInfo: any; } & Record<never, any> & Vue, object, object, object, Record<never

随机推荐