vue3+vite+js 引用public文件夹中js文件

vue的public的资源在打包时不会被编译,只会copy

 所以在在src路径下引入public文件夹下的图片、视频、音频,编译不会改变其路径,但是在src下引入public文件夹下的js、json,在打包时都会被编译,所以直接引入会丢失路径(因为打包时,当前页面引入的路径被hash打包,而public文件夹下只是被copy)故需要再src下引入public文件夹的资源需要根据情况进行处理

  ①在引入图片类资源 (img标签src属性赋值绝对路径/)

    <div class="view"><img src="/moon.png" /></div>

  ②在引入js、json文件时,需要全局引入

    1、/public/ep.js (j借助window对象存一个全局变量)     

1
2
3
window.endpoints={
api:'http://localhost:8080/api/v1'
}

2、页面入口index.html

        在head中引入js文件

1
2
3
4
5
<head>
    ....
    <script type="module"  src="/ep.js"></script>
    ....
</head>

  3、其他页面使用

1
2
3
<script setup>
    const api = window.endpoints.api
</script>

  

posted @   新恒  阅读(4507)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示