首页 > 其他分享 >vue3+vite+js 引用public文件夹中js文件

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

时间:2024-04-26 09:35:40浏览次数:25  
标签:文件夹 src js api vue3 引入 public

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对象存一个全局变量)     

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

2、页面入口index.html

        在head中引入js文件

<head>
    ....
    <script type="module"  src="/ep.js"></script>
    ....
</head>

  3、其他页面使用

<script setup>
    const api = window.endpoints.api
</script>

  

标签:文件夹,src,js,api,vue3,引入,public
From: https://www.cnblogs.com/xinheng/p/18159245

相关文章

  • js逆向实战之喜马拉雅Xm-Sign参数解密
    url:https://www.ximalaya.com/channel/11/分析过程抓包,关注有页面数据回显的数据包。该url的请求头中有个加密的参数,找到该参数的加密过程。由于该参数名比较不常见,可以直接全局搜索这个参数名。只有一处,打断点。切换页码,触发断点。非常直接,xm-sign是由d.getS......
  • 2024年vue 开发环境 Node.js于win10环境下的安装
    2024年vue开发环境Node.js于win10环境下的安装导航2024年vue开发环境Node.js于win10环境下的安装导航一、下载node.js二、安装node.js三、测试(一)四、环境配置五、测试(二)六、安装淘宝镜像七、安装vue脚手架一、下载node.jsNode.js官方网站下载:https://nodejs.org/en......
  • 【vue3入门】-【13】class绑定
    class绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表,因为class是Attribute,我们可以和其他Attribute一样使用v-bind将它们动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,vue专门为class和v-bind用法提供了特殊的功能增强。除......
  • 【vue3入门】-【15】侦听器
    侦听器我们可以使用watch选项在每次响应式属性发生变化时触发一个函数<template><h3>侦听器</h3><!--不可以被监听,是固定的数据--><p>{{message}}</p><!--可以被监听,只能监听响应式数据(变化的数据)--><button@click="updateHandle">修改数据</button>&l......
  • 【vue3入门】-【14】style绑定
    style绑定数据绑定的一个常见需求场景式操作元素的cssstyle列表,因为style是一个Attribute,我们可以和其他Attribute一样使用v-bind,将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且容易出错的。因此,vue专门为style的v-bind用法提供了特殊的功能......
  • 【vue3入门】-【16】表单输入绑定
    表单输入绑定在前端处理表单时,我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会比较麻烦,v-model指令帮我们简化了这一步骤。<template><h3>表单输入绑定</h3><form><!--v-model:在页面中输入信息的同时,下......
  • 【vue3入门】-【18】组件组成
    组件组成组件最大的优势就是可复用性当使用构建步骤是,我们一般将vue组件定义在一个单独的.vue文件中,这杯叫做单文件组件(简称SFC)组件组成结构<!--承载所有的html标签,组件中必须要有的部分--><template> <div>承载标签</div></template><!--承载所有的业务逻辑,组件中可选......
  • 【vue3入门】-【17】模版引用
    模版引用虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素。要实现这一点,我们可以使用特殊的refattribute挂载结束后引用都会被暴露在this.$refs只上,从this.$refs中按照js原生方法获取元素属性或变更元素属性<template>......
  • 【vue3入门】-【19】组件嵌套关系
    组件嵌套关系组件允许我们将UI划分为独立的,可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被阻止成层层嵌套的树状结构这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容和逻辑APP.vue<template><!--主......
  • 【vue3入门】-【5】属性绑定
    属性绑定双大括号不能在htmlattributes中使用。想要响应的绑定一个attribute,应该使用v-bind指令<script>exportdefault{data(){return{msg:"active",myid:"test-id"}}}</script><template><divclass="{{msg}......