随手笔记:vue public文件夹index.html全局引入js

如果我们通过相对路径或者绝对路径引入public中的文件,会出现一个现象:在该项目的index路由下能够正常引入,但是别的页面就会出现报错

token '<' (at 某某某js文件:1:1)

造成该现象的原因:

  1. 相对路径可能会受到URL的影响,从而导致不正确的资源引入。例如,在当前页面的URL路径为"/example/my-page"时,如果使用相对路径引入静态资源,可能会导致资源无法正确地加载。

  2. 绝对路径通常是固定的,并不支持动态计算路径,而Vue CLI的<%= BASE_URL %>变量正是为了避免这种问题而设计的。

所以我们可以采用 Vue CLI 中的 <%= BASE_URL %> 变量,它是在Vue应用运行时动态生成的,可以用于自动计算出当前页面所在目录的绝对路径。在默认情况下,这个变量的值为"/",代表着应用的根路径。

<script src="<%= BASE_URL %>my-script.js"></script>

如果说public中还有文件层级则需要:

<script src="<%= BASE_URL %>js/my-script.js"></script>

即可

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
index.vue:202 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') at _callee$ (index.vue:202:1) at tryCatch (regeneratorRuntime.js:44:1) at Generator.eval (regeneratorRuntime.js:125:1) at Generator.eval [as next] (regeneratorRuntime.js:69:1) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:22:1) at eval (asyncToGenerator.js:27:1) at new Promise (<anonymous>) at eval (asyncToGenerator.js:19:1) at VueComponent.handleNodeClick (index.vue:228:1) _callee$ @ index.vue:202 tryCatch @ regeneratorRuntime.js:44 eval @ regeneratorRuntime.js:125 eval @ regeneratorRuntime.js:69 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:22 eval @ asyncToGenerator.js:27 eval @ asyncToGenerator.js:19 handleNodeClick @ index.vue:228 handleSizeChange @ index.vue:191 invokeWithErrorHandling @ vue.runtime.esm.js:3971 invoker @ vue.runtime.esm.js:1188 invokeWithErrorHandling @ vue.runtime.esm.js:3971 Vue.$emit @ vue.runtime.esm.js:2874 handleChange @ element-ui.common.js:982 invokeWithErrorHandling @ vue.runtime.esm.js:3971 invoker @ vue.runtime.esm.js:1188 invokeWithErrorHandling @ vue.runtime.esm.js:3971 Vue.$emit @ vue.runtime.esm.js:2874 handleOptionSelect @ select.js:1945 invokeWithErrorHandling @ vue.runtime.esm.js:3971 Vue.$emit @ vue.runtime.esm.js:2874 dispatch @ emitter.js:29 selectOptionClick @ option.js:383 click @ option.js:230 invokeWithErrorHandling @ vue.runtime.esm.js:3971 invoker @ vue.runtime.esm.js:1188 original_1._wrapper @ vue.runtime.esm.js:7265 index.vue:201
06-13
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值