vue 路由跳转history模式报Uncaught SyntaxError: Unexpected token ‘<‘

本文详细介绍了Vue CLI中publicPath的配置,解释了其作用和默认值,特别是在子路径部署时的设置。强调了在使用HTML5 history模式和构建多页面应用时应避免使用相对publicPath,并提供了正确配置的例子。理解publicPath对于确保Vue应用正确部署至关重要。
摘要由CSDN通过智能技术生成

这个坑超级坑,独立搭过项目的兄弟应该会遇到,控制台报这个错
在这里插入图片描述
在这里插入图片描述
是不是摸不着头脑?

● publicPath
●Type: string
●Default: ‘/’

部署应用包时的基本URL。用法和webpack本身的output . publicPath-致, 但是VueCL在其他地方也需要用到这个值,所以请始终使用publicPath 而不要直接修改webpack的output . publicPath。
默认情况下,Vue CLI会假设你的应用是被部署在一个域名的根路径上,如果应用被部署在一个子路径 上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在https://www. my -app. com/my-app/,则设置publicPath 为/my-app/ 这个值也可以被设置为空字符串(”)或是相对路径( ‘./’ ),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid应用的文件系统中。

相对publicPath的限制
相对路径的publicPath 有一些使用上的限制。
在以下情况下,应当避免使用相对
publicPath :
当使用基于HTML5 history. pushState 的路由时;
当使用pages 选项构建多页面应用时。

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

history模式下 vue.config.js中publicPath不要设置为相对路径
正确如下
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值