如果我们通过相对路径或者绝对路径引入public中的文件,会出现一个现象:在该项目的index路由下能够正常引入,但是别的页面就会出现报错
token '<' (at 某某某js文件:1:1)
造成该现象的原因:
-
相对路径可能会受到URL的影响,从而导致不正确的资源引入。例如,在当前页面的URL路径为"/example/my-page"时,如果使用相对路径引入静态资源,可能会导致资源无法正确地加载。
-
绝对路径通常是固定的,并不支持动态计算路径,而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>
即可