vue引用public文件夹中文件的多种方式
1 官方解释
2 使用
可以先看最下面结论
在Test.vue组件中测试
2.1 图片文件
方式一（ide正常，页面正常，img标签src属性赋值绝对路径/）：
<template>
<div class="view"><img src="/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
build后：
页面显示：
方式二 （ide警告,页面正常,img标签src属性赋值绝对路径/public）
<template>
<div class="view"><img src="/public/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>ide警告：
build后：
可以看到，这样的方式引用，会把图片文件复制一份，名称追加hash值，放在assets下面，根目录下的moon.png并没有被引用
页面显示：
方式三（ide警告，页面正常，img标签src属性赋值相对路径../../public）：
<template>
<div class="view"><img src="../../public/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，这样的方式引用，会把图片文件复制一份，名称追加hash值，放在assets下面，根目录下的moon.png并没有被引用
页面显示：
方式四（ide正常，页面正常，img标签src属性绑定变量，变量赋值/）：
<template>
<div class="view">
<img :src="img" />
</div>
</template>
<script setup lang="ts">
const img = "/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
build后：
页面显示：
方式五（ide警告，开发页面正常,生产页面报错，img标签src属性绑定变量，变量赋值/public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "/public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
页面显示：
上图显示正常是因为在开发环境，存在public路径，但是如果部署服务器，就会找不到图片如下图，因为没有public这个路径，
方式六（ide警告，页面正常，img标签src属性绑定变量，变量赋值../../public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "../../public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
页面显示：
上图显示正常是因为在开发环境，存在public路径，但是如果部署服务器，就会找不到图片如下图，因为没有public这个路径，
方式七（ide正常，页面正常，import图片，路径为/）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>build后：
页面显示：
方式八（ide警告，页面正常，import图片，路径为/public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "/public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，这样的方式引用，会把图片文件复制一份，名称追加hash值，，放在assets下面，根目录下的moon.png并没有被引用
页面显示：
方式九（ide警告，页面正常，import图片，路径为../../public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "../../public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，这样的方式引用，会把图片文件复制一份，名称追加hash值，，放在assets下面，根目录下的moon.png并没有被引用
页面显示：
2.2 json文件
方式一（ide报错，页面报错，无法使用，import引入）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/data.json";
console.log("aaa", data);
</script>
<style scoped></style>
ide报错：
页面报错：
方式二（页面正常，import引入，增加?url参数）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/data.json?url";
console.log("aaa", data);
</script>
<style scoped></style>
build后：
页面显示：
可以看到页面仅仅显示路径，而不是文件内容
方式三（ide警告，页面正常，import引入,路径增加/public）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/public/data.json";
console.log("aaa", data);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build报错：
"vite build"命令build后:
可以看到，虽然有警告，但是/public中的json文件，在vue组件中用import { test } from '/public/data.json' 方式引入后还是可以使用的,但是json文件内容已经被引入到当前js中了，实际上删除打包后根目录中的data.json也不会影响
页面正常：
方式四（ide警告，页面正常，import引入,路径增加../../public相对路径）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "../../public/data.json";
console.log("aaa", data);
</script>
<style scoped></style>ide警告：
build后:
页面显示：
2.3 js文件
方式一（报错，无法使用，import引入）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "/test.js";
console.log("aaa", test);
</script>
<style scoped></style>ide报错：
页面报错：
方式二（ide警告，页面正常，import引用，路径加/public，绝对路径）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "/public/test.js";
console.log("aaa", test);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build报错：
"vite build"命令build后:
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响
页面显示：
方式三（ide警告，页面正常，import引用，路径加../../public，相对路径）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "../../public/test.js";
console.log("aaa", test);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build报错：
"vite build"命令build后:
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响
3 结论
综上：
- 1,4,7是正确用法，
- 5,6,10,14是错误用法，
- 2,3,8,9可以使用，但是图片会被复制到assets文件夹，重命名hash,违背放在/public的初衷，
- 11无法获取文件内容，
- 12,13,15,16可以使用，但是json和js会被复制到assets文件夹，重命名hash,违背放在/public的初衷
- 如果有一个json/js文件，含有大量数据，不会经常变动，如果按照官网解释，放在src中的assets文件夹中，build时候会被打包，并且hash命名，不符合我们本意，如果直接放在/public文件夹，只要在组件中引入，build时，就会自动复制到输出目录的/assets/文件夹中,并且hash命名（图片）或者将其内容打包到引用的js文件中（json,js），不符合我们本意，临时的办法是，在index.html中引入json/js文件,但是这样是全局的
总结
到此这篇关于vue引用public文件夹中文件的多种方式的文章就介绍到这了,更多相关vue引用public文件夹文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
道axios是一个库,并不是vue中的第三方插件,下面这篇文章主要给大家介绍了关于Vue3使用axios的配置教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
Vue.js每天必学之表单控件绑定，如何在表单控件元素上创建双向数据绑定，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue--select组件的使用与禁用的实现代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2018-04-04
出于安全考虑，用户长时间不操作，就回到登录页面，让用户重新登录，本文就记录一下实现这种效果的两种方式，具有一定的参考价值，感兴趣的可以了解一下2021-09-09
这篇文章主要介绍了详细对比Ember.js和Vue.js，对JS框架感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要介绍了web面试中常问到的关于vue自定义组件及调用方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2021-09-09
这篇文章主要给大家介绍了关于vue3父组件调用子组件的方法例子,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了uni-app 开发微信小程序定位,通过使用onLocationChange方法持续监听地址，根据定位精度字段判断是否使用此次定位的经纬度，需要的朋友可以参考下2022-04-04
下面小编就为大家分享一篇vue父组件向子组件传递多个数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论