脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue引用public文件夹文件

vue引用public文件夹中文件的多种方式

 更新时间：2024年02月21日 10:12:28   作者：无心使然云中漫步  
由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,这篇文章主要给大家介绍了关于vue引用public文件夹中文件的多种方式,需要的朋友可以参考下

1 官方解释

vite官网解释

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文件夹文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在小程序/mpvue中使用flyio发起网络请求的方法

    在小程序/mpvue中使用flyio发起网络请求的方法

    这篇文章主要介绍了在小程序/mpvue中使用flyio发起网络请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue对于低版本浏览器兼容问题的解决思路

    vue对于低版本浏览器兼容问题的解决思路

    很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下
    2023-02-02
  • vue 判断元素内容是否超过宽度的方式

    vue 判断元素内容是否超过宽度的方式

    这篇文章主要介绍了vue 判断元素内容是否超过宽度的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue cookie和本地存储的使用详解

    vue cookie和本地存储的使用详解

    在Vue中,可以使用多种方式来处理cookie和本地存储,不同的方法还有不同的特点和适用场景,本文主要介绍了这些方法的对比和使用场景,希望对大家有所帮助
    2023-08-08
  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    这篇文章主要介绍了vue前端项目打包成Docker镜像并运行的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    这篇文章主要介绍了使用VUE+SpringBoot+EasyExcel 整合导入导出数据的过程详解，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Vue 针对浏览器参数过长实现浏览器参数加密解密的操作方法

    Vue 针对浏览器参数过长实现浏览器参数加密解密的操作方法

    文章介绍了如何在Vue项目中使用crypto-js库对浏览器参数进行加密和解密,以解决参数过长的问题,在router/index.js中添加了相关代码,并在utils工具类中添加了encryption.js和query.js源码,感兴趣的朋友一起看看吧
    2024-12-12
  • 一文详细介绍vue的递归组件(推荐)

    一文详细介绍vue的递归组件(推荐)

    这篇文章主要介绍了vue递归组件的相关资料,递归组件是Vue.js中用于渲染层级结构的强大工具,通过组件调用自身来简化复杂数据的渲染,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-12-12
  • Vue动态组件实现异常处理方法

    Vue动态组件实现异常处理方法

    Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • vue3组件化开发常用API知识点总结

    vue3组件化开发常用API知识点总结

    Vue是目前Web前端最流行的开发框架技术, 下面这篇文章主要给大家介绍了关于vue3组件化开发常用API的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论