vue项目，cli-3.0项目部署运行报错：Uncaught SyntaxError: Unexpected token <

最新推荐文章于 2024-12-12 09:52:12 发布
原创 最新推荐文章于 2024-12-12 09:52:12 发布 · 2.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #history

本文深入探讨了在前端开发中使用相对路径引入资源文件（如JS和CSS）时可能遇到的问题，特别是在使用HTML5 history.pushState路由和多页面应用构建时。通过实际案例，文章揭示了相对路径对publicPath的限制，并分享了解决方案。

尝试多种办法，仍无法解决：

1、引用js、css使用：./路径

2、

// <script src="./js/config.js">
<script src="<%= BASE_URL %>js/config.js">

3、assetsPublicPath： ./

4、

5、

6、

...

试了超多方法。。。

 

解决：

真的坑：避免使用相对路径。。。

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

1. 当使用基于 HTML5 history.pushState 的路由时；

2. 使用 pages 选项构建多页面应用时。

Vue3 Uncaught SyntaxError: Unexpected token ＜‘ 错误参考解决方法
shi15926lei的博客
05-23 2366
1.检查引用的 JavaScript 文件是否正确：确认所有引用的外部 JavaScript 文件路径是否正确，可以在静态资源的路径前加上<%= BASE_URL %>，例如<script type="text/javascript" src="<%= BASE_URL %>jquery.min.js"></script>。2.检查 JavaScript 文件的内容：打开引用的 JavaScript 文件，确保文件内容是有效的 JavaScript 代码，没有错误或意外的 < 字符。
webpack打包vue文件时报错`Unexpected token:`
要坚持，要认真。
05-09 2万+
webpack打包vue文件时报错Unexpected token:    master分支的代码编译打包一直都正常的，今天上午将一个同事的分支合并后就一直编译不过，走读代码发现改动也比较少，也不涉及到package.json中插件的更新，同时本地编译也完全正常，那阿里云CRP容器里面怎么会报错呢！最开始报错的地方是在UglifyJs里面，错误提示是：cannot read property of
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
10-21
主要介绍了JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下
vue-cli3中报错：Uncaught SyntaxError: Unexpected token ＜
lijiabin102的博客
11-13 1179
解决方法： 1： publicPath 不要写成相对路径’./’ 要写成绝对路径 ‘/’ 2：修改重叠的路由名称 这种问题普遍发生在路由中有重叠名称的路由的情况 比如一个页面的路由是/admin，另两页面个是他的子页面路由叫/admin/news，和/admin/action， 这样的话，如果设置publicPath是’./’，那两个就不能正常跳转，就会出错 而且无论是开发模式还是发布模式，都会出错。 如果没有重叠名称的路由，比如另两个叫/news和/action，那么设成./也不会有问题。 ...
vue3项目中Uncaught SyntaxError: Unexpected token ‘＜‘ 错误参考解决方法
weixin_59587584的博客
10-28 4877
‘Uncaught SyntaxError: Unexpected token '
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
精选资源
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的，但引入 /src 和 /static 的文件是...
精选资源
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router...页面全白,console打印:Uncaught SyntaxError:Unexpected token < 报错截图: 经过一番折腾,初步定位问题1在经过build/webpack.prod.conf.js的chunkhash打包后的JS文
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
10-17
主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3的项目用谷歌72的版本打开，报错Uncaught SyntaxError: Unexpected token ?
最新发布
陈先生的博客
12-12 1297
使用vue3开发项目时候，项目打包完成后，部署项目的时候，可能会出现在服务器部署前端代码的时候出现白屏的情况，1.可能出现nginx路径配置不正确的问题，导致出现报错，这个可以在nginx的error的文件内查询报错内容。2.可能是因为vue3的代码采用es6语法，无法适应低版本的浏览器，比如谷歌的72版本的浏览器。开发环境可能是高等级的浏览器，客户的环境可能是低等级的浏览器，而且无法升级等情况。
vue3 Uncaught SyntaxError: Unexpected token . 部分老版本浏览器报错
qq_39196447的博客
09-20 1935
重新运行项目即可解决。
Uncaught SyntaxError: Unexpected token 问题
I've been looking for
04-20 1万+
本次主要是为了记录自己在开发过程中遇到的问题，以方便后续开发的时候，能够快速的找到问题在用 vue.js和node.js 、egg .js来开发时出现的问题。Uncaught SyntaxError: Unexpected token 问题，之前也出现过这样的问题，但是去解决的时候突然忘记该怎么去解决，然后又要一点的去打印去看哪里出现问题。这里出错，那就从这里出发去查找问题，这里是不是数据出现问题...
【vue3常见报错3】yntaxError: Unexpected token ‘＜‘
朱远辉的博客
05-19 1781
【vue3常见报错3】yntaxError: Unexpected token '
php token_get_all,js报Uncaught SyntaxError: Unexpected token <错误 解决方法
weixin_42545159的博客
03-21 679
vue项目 报Uncaught SyntaxError: Unexpected token < 错误，一般是本来script src里应该是.js脚本资源，但是服务器却返回了.html 资源，出现这种情况很可能是新项目构建完后，用户还是访问老的缓存页面，老的缓存页面里的script src 引用的资源是服务器返回的404 html文件页面或者是被运维设置( try_files $uri $u...
Uncaught SyntaxError: Invalid or unexpected token
coco1118的博客
11-24 926
textarea里输入时，开头或结尾加上Eenter键后，再次查询数据库并给textarea框赋值时： $(&amp;amp;amp;quot;#return&amp;amp;amp;quot;).val(&amp;amp;amp;quot;{$list.return}&amp;amp;amp;quot;); 就会报错如本文标题。
解决方法 Uncaught SyntaxError: Unexpected token ，
weixin_46483221的博客
05-15 8206
这里出现了一个中文输入环境下的逗号，改正过来即可。 那么很多人还会有其他的一些错误，排查的步骤可以这样做： 1.先去检查一下语法错误 2.检查后端返回的json格式数据，是否是正确的json格式。可以将数据打印出来，然后校验一下，这里给大家提供一个校验json格式数据的网址。http://www.bejson.com/ 将你的数据粘贴过去就可以检验出来是不是json格式的数据 ...
Vue--解决...运算符报错：Syntax Error: Unexpected token
热门推荐
IT利刃出鞘的博客
01-29 6万+
本文介绍Vue项目中...（三点运算符）的“Syntax Error: Unexpected token”报错的解决方法。
解决 Uncaught SyntaxError: Unexpected token ‘＜‘ 解决方法
weixin_42504805的博客
02-20 1万+
问题：在vue项目中引入静态资源，放在public文件夹里使用。
uncaught syntaxerror unexpected token )
akazhuk的专栏
08-07 1634
最近搞一个项目，老是遇到这个问题，今天终于解决了. 问题竟然是 项目的编码问题... PHP的代码: $return['status']=true; $return['message'] = '添加相片成功!'; 这里只是一小段代码,这里主要是添加相片成功后,返回状态和输出用的信息. HTML: success:function(result){ var r
vue-cli打包部署后报错uncaught syntaxerror: unexpected token &#39;<
07-15
### 回答1： 这个错误通常是由于在使用vue-cli打包部署后，浏览器加载的文件中存在语法错误导致的。常见的原因包括以下几点： 1. HTML标签错误：`uncaught syntaxerror: unexpected token &#39;<&#39;`表示浏览器在解析JavaScript脚本时遇到了HTML标签。可能是在文件中的某个地方标签没有正确闭合或者存在其他HTML错误。 2. 引入错误的文件：有时候在vue-cli打包后的文件中，会意外引入错误的文件，例如引入了一个HTML文件或者其他非脚本文件。 解决这个问题的方法如下： 1. 检查HTML标签：审查你的HTML文件，确保所有的标签都正确闭合。尤其注意script标签的位置和闭合，确保没有标签冲突。 2. 检查引入的文件：检查打包后的index.html文件或者其他HTML文件，查看是否引入了错误的文件。确保只引入了正确的JavaScript脚本。 3. 清除缓存：有时候浏览器会缓存旧的文件，尝试清空缓存再重新打开网页看是否仍然报错。 总之，`uncaught syntaxerror: unexpected token &#39;<&#39;`错误一般是由于HTML标签错误或者错误的文件引入导致的。通过检查HTML标签和引入的文件，可以解决这个错误。 ### 回答2： 当我们使用vue-cli进行打包部署时，有时会遇到"uncaught syntaxerror: unexpected token &#39;<"的报错。这个错误通常是因为我们在部署过程中出现了一些问题。 首先，我们需要检查打包后生成的index.html文件，查看其中的<script>标签是否正确引入了打包后的JavaScript文件。如果引入路径错误或者缺少引入打包后的文件，就会导致浏览器无法正确解析JavaScript文件，从而报错。 其次，我们需要检查一下webpack配置文件是否正确。可以在项目根目录下找到webpack.config.js或者vue.config.js文件，查看其中的配置是否有误。特别是在output选项中，确保打包后生成的JavaScript文件被正确地输出。 另外，我们还需要注意一些打包配置的细节。比如，在vue-cli 3.x版本中，会默认将打包后的文件放在dist目录下，如果我们的项目是部署在子目录下的，需要在vue.config.js中进行配置，指定publicPath为子目录路径。 最后，我们还可以尝试删除原来的打包文件，重新运行打包命令，以及确保本地安装的vue-cli版本为最新稳定版本。 总的来说，"uncaught syntaxerror: unexpected token &#39;<"是由于打包配置或者引入路径的错误导致的，通过检查以上几个方面，可以解决这个报错。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值