vue中public的用法详解

最新推荐文章于 2025-06-06 11:31:36 发布
最新推荐文章于 2025-06-06 11:31:36 发布
阅读量8.5k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/KingRules/article/details/109725701
本文介绍了如何在项目中创建一个public文件夹来存放公共JavaScript文件，并在index.html中通过原生script标签引入。步骤包括建立文件夹、编写JS内容、在HTML中引入以及如何使用存储的数据。这种方法有助于管理和复用代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先要说的是，piblic属于用于存放公共js文件夹，在index.html中用script标签引入（一定要用原生的引入，不然打包可能会出错！！），在需要的页面使用就可以了，具体如下：

第一步建立文件夹

 

 

第二步js文件内容

 

第三步在index。html中引入

 

第四步直接拿js中的stylejson数据就可以了

 

Vue脚手架的public文件夹用途及内容
2301_79326891的博客
09-28 1753
在Vue项目中，public文件夹扮演着重要的角色，用于存放不需要经过构建处理的静态资源文件。本文将详细介绍Vue脚手架的public文件夹的用途，并提供一些示例代码。以上是一些常见的在Vue脚手架的public文件夹中存放的内容。记住，public文件夹中的文件会直接被复制到最终的构建输出目录中，因此请确保在引用这些文件时使用正确的路径。public文件夹的作用是存放应用程序的公共资源和静态文件。一般情况下，public文件夹中的文件会被直接复制到最终打包后的输出目录中。
vue引用public目录下文件
X_W123的博客
05-27 1万+
vue引用public目录下文件 有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？ 其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了 关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种： 1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类
vue项目js 公共js文件
01-02
一个vue项目的 js公共包 里面拥有很多 js封装好的方法 是一个工具类
vue-public文件夹
东东爱编码博客
07-07 1万+
文章目录一、vue-public文件夹的认识 一、vue-public文件夹的认识 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。 注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处： 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
vue项目在public index.html文件添加变量
最新发布
m0_59148573的博客
06-06 273
如：给写一个变量，配置在env文件里。
Vue如何访问Public文件夹
热门推荐
汪程序员
05-01 1万+
说明 为什么需要访问Public文件夹的内容？ 一般都是放在assets下面，但是无法实现动态访问，这就造成如果你要动态加载一个图片或者视频是不行的。 比如：我现在把testHuawei.mp4放在assets文件夹下面，那么他会被打包，这时候，运行，你找到这个图片，它的路径为： http://localhost:8081/media/testHuawei.c4367207.mp4 多出一个c4367207（这是内部为了安全），这样你在写代码无法动态加载，因为只要是文件不一样，生成的数值也是不一样。
vue 项目中的 public、static及指定不编译文件
weixin_43714836的博客
11-20 4648
vue 项目中 public、static 及自己指定不编译文件，原里都是通过插件 cope-webpack-plugin 来实现。当某些文件不需要 webpack 解析时，指定不编译的功能很有用！
Vue.config文件里边的publicPath的配置使用
2201_75705263的博客
03-05 8915
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
`assetsSubDirectory` 和 `assetsPublicPath` 是 Vue CLI 中两个重要的配置选项，它们决定了应用中静态资源的组织和访问方式。 1. **assetsSubDirectory**： `assetsSubDirectory` 是配置在 `config/index.js` ...
vue全局组件与局部组件使用方法详解
11-29
main.js入口文件的一些常用配置， 在入口文件上定义的public.vue为全局组件，在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> —main.js文件 **main.js入口文件的内容** import Vue from 'vue' ...
vue详解
m0_46702681的博客
07-08 1493
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
vue 插件的方法代码详解
12-02
在本文中，我们将深入探讨如何开发Vue插件，特别是关注`install`方法的使用。Vue插件的开发通常涉及创建一个对象或者函数，其中包含`install`方法，以便用户通过`Vue.use()`来加载和使用插件。 首先，为了开发Vue...
Vue中public/assets目录区别
m0_69497411的博客
04-30 4843
一直以来都有个疑问在vue的项目中有两个静态资源目录文件夹public和assets，在实际项目里如果有资源到底是放在哪个里面?两者有什么区别？
Vue 获取 public图片
weixin_45849417的博客
09-21 2066
vue 获取public图片的路径
Vue静态资源之public文件
Salange1的博客
10-21 6164
今天在看公司项目代码时，发现了一个比较有趣的动画，审查元素才发现是一个gif动图，查看相关代码发现图片路径写的是于是我按照之前的习惯向上找三级，找了半天没有找到那个文件，最后全局搜索发现文件是存在根目录的public文件夹下。
vue中如何获取public路径
hantanxin的专栏
11-29 3716
在Vue项目中获取public路径有多种方法可供选择。1、使用相对路径适用于简单项目，2、使用环境变量适用于需要在不同环境中配置路径的项目，3、使用webpack配置则适用于需要根据构建环境动态调整路径的复杂项目。根据项目需求选择合适的方法，可以提高项目的灵活性和可维护性。建议在实际项目中，根据具体需求选择合适的方法。如果项目较为简单，使用相对路径即可满足需求；如果需要在不同环境中使用不同路径，推荐使用环境变量；而对于需要动态调整路径的复杂项目，可以考虑使用webpack配置。
vue抽取公共方法———方法一
weixin_34409741的博客
11-13 1363
方法一：Vue插件 1.概述 作用：满足vue之外的需求，特定场景的需求 比如说，让你在每个单页面组件里，都可以调用某个方法（公共方法），或者共享某个变量等 2.使用方法 【声明插件】- 【写插件】-【注册插件】-【使用插件】 生命插肩和写插件是同时进行的，注册插件到Vue对象中，最后在Vue组件的时候使用写的插件 声明插件 插件的需求都是公共部分，所以会创建文件夹utils，里...
Vue引用public中的js文件
韦大人orz
12-01 1万+
背景 由于一些演示，需要对一些简单页面进行配置，由于打包build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。所以文件放在public。 步骤 1.在public文件夹下创建config.js文件 用window.config 这样方式挂载也是可以的，或者直接定义变量。 let config = [ // window.config = [ { title: '智能指挥中心1', content: [ { .
34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin
970655147的专栏
03-22 1870
拷贝的文件信息如下, 将 “node_modules/mars3d-cesium/Build/Cesium/” 下面的 “Workers”, “Assets”, “ThirdParty”, “Widgets” 文件夹分别拷贝到 “dist/mars3d-cesium” 的 “Workers”, “Assets”, “ThirdParty”, “Widgets”这样前端页面就可以通过 “http://localhost:8080/mars3d-cesium/” 来访问相关的服务了。
PyCharm中Vue项目开发教程与组件结构详解
- 在App.vue中使用`<router-link>`实现组件间的跳转，如 `免费课程</router-link>`。 6. **显示数据**: - 在组件模板中使用双大括号`{{ }}`来动态渲染数据，如： ``` {{ course_list }} ``` - 在组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值