vue中使用public文件夹下资源地址应该怎么写？

原创 已于 2022-05-22 22:57:17 修改 · 6.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #webpack

于 2022-05-22 22:56:48 首次发布
本文介绍了如何在Vue项目中使用未经过Webpack处理的public文件夹中的图片，通过直接路径的方式实现资源的引用，并提供了实际打包验证。

如图所示的项目目录，想在New.vue中引用public文件夹图片。
在这里插入图片描述
需要清楚一点：

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
官网说明
这句话意思是public文件夹下的文件不会经过webpack打包，直接复制出来。

我们开始打包验证一下：
在这里插入图片描述
可以清楚的看到pubic下的文件打包时直接被拿出来了。
在这里插入图片描述
如何使用，直接使用‘/’定位到根目录即可。
代码如下：

   <img src="/static/404.gif" alt="">

在这里插入图片描述

Vue脚手架的public文件夹用途及内容
2301_79326891的博客
09-28 1872
在Vue项目中，public文件夹扮演着重要的角色，用于存放不需要经过构建处理的静态资源文件。本文将详细介绍Vue脚手架的public文件夹的用途，并提供一些示例代码。以上是一些常见的在Vue脚手架的public文件夹中存放的内容。记住，public文件夹中的文件会直接被复制到最终的构建输出目录中，因此请确保在引用这些文件时使用正确的路径。public文件夹的作用是存放应用程序的公共资源和静态文件。一般情况下，public文件夹中的文件会被直接复制到最终打包后的输出目录中。
vite+vue3+plyr播放本地public文件夹下视频无法加载，如何解决？？？
**My Coding Family**
09-05 1050
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin
970655147的专栏
03-22 1972
拷贝的文件信息如下, 将 “node_modules/mars3d-cesium/Build/Cesium/” 下面的 “Workers”, “Assets”, “ThirdParty”, “Widgets” 文件夹分别拷贝到 “dist/mars3d-cesium” 的 “Workers”, “Assets”, “ThirdParty”, “Widgets”这样前端页面就可以通过 “http://localhost:8080/mars3d-cesium/” 来访问相关的服务了。
vue引用public文件夹中文件
无心使然云中漫步
12-13 1万+
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。
vue中如何获取public路径
hantanxin的专栏
11-29 4507
在Vue项目中获取public路径有多种方法可供选择。1、使用相对路径适用于简单项目，2、使用环境变量适用于需要在不同环境中配置路径的项目，3、使用webpack配置则适用于需要根据构建环境动态调整路径的复杂项目。根据项目需求选择合适的方法，可以提高项目的灵活性和可维护性。建议在实际项目中，根据具体需求选择合适的方法。如果项目较为简单，使用相对路径即可满足需求；如果需要在不同环境中使用不同路径，推荐使用环境变量；而对于需要动态调整路径的复杂项目，可以考虑使用webpack配置。
如何使用vue-cli3获取public文件夹静态资源而不报错
最新发布
11-11
在使用Vue CLI 3开发Vue应用程序时，公共文件夹中的静态资源文件（如图片、图标、HTML模板等）通常不会引起问题，但在部署过程中可能会出现404错误。这是因为这些静态资源在构建应用时不经过Webpack处理，并直接从`...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
这篇文章将详细介绍如何在Vue CLI 3项目模板中正确使用`public`目录下的静态文件。 首先，`public`目录位于项目的根目录下，它的特点在于其中的文件将会被原封不动地复制到构建输出目录。这意味着，任何放置在`...
Vue—public文件夹与src/assets文件夹的区别
雷雨天的雷胖子
12-24 5744
目录 一、概述 二、详解 三、拓展 一、概述 vue-cli3.0创建的项目中，有两个静态资源目录，分别是public和assets。其中public相当于一个静态资源服务器，assets则存放项目的依赖资源。 二、详解 public文件夹 存放静态资源，且该目录下的资源不会被webpack解析处理，如下图所示，打包时将被直接复制到dist目录，注意，public目录下的空文件夹不会被复制到dist目录。所以，如果引用的资源不希望被webpack处理时，可将其放置在public目录下。p
Vue静态资源之public文件
Salange1的博客
10-21 6188
今天在看公司项目代码时，发现了一个比较有趣的动画，审查元素才发现是一个gif动图，查看相关代码发现图片路径写的是于是我按照之前的习惯向上找三级，找了半天没有找到那个文件，最后全局搜索发现文件是存在根目录的public文件夹下。
Vue引用public中的js文件
05-31 6030
在public文件夹下创建config.js文件。 config.js中可以使用变量，也可以使用window来挂载 测试： 打包后，依然可以正常使用，不会有路径报错
vue下载本地工程中文件，路径写法
阿兰你在哪
05-16 1355
1、vue3没有static目录，将文件放在public目录下。 2、使用elementui中的el-link标签，直接在href中写路径，如下 直接 ./xxx.xx就可以了
【vue 引用public中的js文件】public文件的引用
weixin_41747256的博客
01-24 6167
一些配置项文件如果想在项目打包后进行快速的修改，可以把此文件放在public里面。
vue引用public目录下文件
热门推荐
X_W123的博客
05-27 1万+
vue引用public目录下文件 有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？ 其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了 关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种： 1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类
Vue 获取 public图片
weixin_45849417的博客
09-21 2149
vue 获取public图片的路径
vue - 图片存放路径`public目录、src/assets目录下）的区别、访问方式
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-06 9322
public目录下项目需要使用的静态资源，有更新动态显示的需求。 src/assets目录下适合存放项目中所必须的图标，属于代码的一部 图片存放在这两个位置时的访问方法： public目录下：使用 / 开头的绝对路径访问 若：/public/images/a.jpg 访问： <img src="/images/a.jpg"> 若：/public/images/a/b/c/d.jpg 访问： <img src="/..
vue前端项目中怎么将静态资源public中内容引入
m0_47634044的博客
07-08 7208
在页面资源或者其他文件夹下的资源，我们可以通过相对路径的方式进行引用，例如“…/user/index.js”就表示在当前文件位置的上一级目录下的index.js文件。那么我们在一个vue项目中将公共的一些图片资源或者其他资源存的时候，通过相对路径就过于复杂了。可以参考下面这种写法。 获取public下的图片文件夹中一张图片。 src=“ ”一个斜杠就表示资源定位到public下......
vue3 访问 public 内文件
weixin_46243213的博客
10-07 7695
vue3 访问 public 内文件
vue——项目中加载public中的静态资源——技能提升
yehaocheng520的博客
04-13 3487
vue——项目中加载public中的静态资源——技能提升
vue中public文件夹下js文件引入src文件下js
05-20
在Vue中，public文件夹是用于存放静态资源的地方，其中的文件可以通过相对路径引入到Vue组件中。如果你想在public文件夹下的JS文件中引入src文件夹下的JS文件，可以采用以下两种方式： 1. 使用绝对路径引入 在public文件夹下的JS文件中，可以使用绝对路径引入src文件夹下的JS文件。例如，如果你想在public/js/main.js中引入src/js/utils.js文件，可以这样写： ```javascript import '/src/js/utils.js'; ``` 这样就可以在main.js中使用utils.js中定义的函数或变量了。 2. 在Vue组件中引入 如果你想在Vue组件中使用public文件夹下的JS文件和src文件夹下的JS文件，可以先在Vue组件中引入public文件夹下的JS文件，在该JS文件中再引入src文件夹下的JS文件。例如，假设你要在Vue组件中使用public/js/main.js和src/js/utils.js中定义的内容，可以这样写： ```javascript <template> <div>{{ message }}</div> </template> <script> import '/public/js/main.js'; export default { data() { return { message: '', }; }, mounted() { // 在mounted钩子函数中使用utils.js中定义的函数 this.message = getMessage(); }, }; </script> ``` 在这个例子中，你首先在Vue组件中引入public/js/main.js文件，然后在mounted钩子函数中使用src/js/utils.js文件中定义的函数getMessage()。这样就可以在Vue组件中使用public文件夹下的JS文件和src文件夹下的JS文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值