vue-cli脚手架搭建项目静态资源图片存放位置

最新推荐文章于 2024-05-14 11:09:32 发布
最新推荐文章于 2024-05-14 11:09:32 发布
阅读量1.4w 收藏 2
点赞数 1
分类专栏： vue.js 文章标签： img base64 http请求 编码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengzihao1023/article/details/83069183
版权

       在刚刚接触vue项目开始，使用vue-cli搭建vue项目，在目录中看到static这个文件夹之后就条件反射将静态文件放在这个文件夹之下。后来在研究别人写的一个完整的vue项目的时候发现他的静态资源文件是放在src吓得assets下的，在强烈的好奇感之下，进行了一番研究。发现这个文件夹里面的图片在发布以后会出现一部分图片直接放在打不后版本的文件夹里，一部分不见了。后来才发现这个文件夹把一部分文件进行了base64编码成css样式了，一部分还是静态资源图片，在好奇之下我找了下原因

      图片base64编译的需求场景和优缺点

      图片在进行base64编码后悔变成css文件里面的样式，在加载图片的时候会减少加载图片是的http请求。但当一个样式超过了2000个字节的时候也是相当影响性能的

 

    这也是为什么在同一个文件夹有的图片进行了base64编码，有的没有编码。这些webpack打包发布vue项目的时候会自己进行判断，然后处理图片是否进行base64编码，这也是别人这个项目为什么把静态图片资源放在src/assets这个文件夹里面的原因

邓子豪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目中图片资源应该存放public还是assets文件夹下？
Sun_blog
08-22 309
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情 前言 你是否有过这样的疑问？ 在vue项目中public和assets文件夹都可以存放图片，那么图片应该存放public还是assets文件夹下？ public或assets文件夹下有什么区别呢？ 什么样的图片应该存放在public文件夹下？ 什么样的图片应该存放在assets文件夹下？ ...
vue框架中，图片应该保存在哪里？应该如何访问，前端实战开发视频
2401_83945851的博客
03-28 478
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue框架中，图片应该保存在哪里？应该如何访问？
热门推荐
商务合作 | 共同学习 | 携手共进
10-08 5万+
在使用vue框架进行开发的过程中，有两个文件夹都可以存放我们的图片以及样式等等，一个是public文件夹，一个是src下的assets文件夹；接下来博主会从这两个文件夹对图片的不同处理来进行分析： public 如果将图片存入public文件夹，系统就会将原来的图片路径及名称编译为一个随机的名字，如下： 经过编译后的图片会极大的减小所占内存，所以在网页中直接展示的图片或者经常随数据库变换而变换的图片都应该放在public文件夹下，这样也可以加快网...
VUE 爬坑之旅 -- 引入静态资源的正确方式
最新发布
2401_84093054的博客
05-14 278
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue脚手架资源、图片路径
gaojianqiao1234的博客
11-09 1013
1.资源、图片的存放和访问 public文件下 引用(以/开头) background-image: url('/search2.png'); src下的，assets 引用（./或@/开头） <img src="@/assets/logo.png" alt=""> ...
Vue-cli中的静态资源管理（src/assets和static/的区别）
riddle1981的博客
11-07 3万+
你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？资源打包为了回答这个问题，我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和backgrou
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
最近更新了webpack配置详解，可移步vue-cli ...这就是我们发布vue官方提供的脚手架工具的原因，一个简单的构建工具，通过几个默认的步骤帮助你快速的构建Vue.js项目。 1.安装node环境 可以使用自带的终端cmd命令行
vue-cli脚手架-bulid下的配置文件
08-27
* public目录：用于存放项目的静态资源，例如图片、CSS文件等。 * src目录：用于存放项目的源代码，例如JavaScript文件、Vue组件等。 五、环境变量和依赖项 Vue-cli项目的环境变量和依赖项是项目开发和构建的关键...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。  我是通过将项目/config下的index.js的assetsPublicPath变成’./’，变成相对路径，进行解决。 cd vue demo ...
vue-cli脚手架搭建的项目去除eslint验证的方法
10-17
Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建 Vue.js 项目。它提供了一整套脚手架，包括配置Webpack、Babel、PostCSS等，以帮助开发者快速构建现代化的前端应用。其中，Eslint 是一个静态代码检查工具，用于...
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
08-27
主要介绍了Vue-cli中的静态资源管理（src/assets和static/的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
create-react-dom脚手架中图片的路径问题
h5wangbq的博客
09-18 800
由于我在使用此脚手架的时候在引用本地图片的时候存在各种问题，特发此博客！！        首先，我们要知道，使用脚手架搭建项目前期需要的图片没有的话，就得引用本地图片，后期项目上线的话，图片地址是在线地址，因此项目上线之后就不需要担心路径问题。        ...
vue本地图片放在public文件夹中
SZnAl的博客
03-02 1229
vue后端渲染图片 图片应放在public文件夹中，在public建立img文件夹 后端json数据库调用时路径直接写 ./img/imgxxx.jpg 即可
vue 图片资源应该如何存放并引入（public、assets）？
Start2019
02-18 3万+
两者存放什么图片，什么时候使用，在某种情况下应该使用哪种方式； 使用方式； 图片路径转换；
vue 静态资源如何放
lianxin19900610的博客
09-11 6891
assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。 assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 &lt;img src="./logo.png"&gt;  和 background: url(./logo.png)中...
在Vue-cli脚手架中引入图片最常用的两种方法
Xwz的博客
04-07 2189
CommonJS API定义了很多普通应用程序（主要指非浏览器的应用）使用的API，require就说其中之一,我们通常需要在组件中引入图片时,可以在Data里使用这个方法require(" ") 这时只需要将标签里的src属性值改为data中的属性名就可以引入图片。 总结了在Vue-cli脚手架中最常用的两种方法 1.在.vue文件中import edit from 'path'（path是图片与.vue的相对路径),然后在template中给标签绑定属性<img src="edit"
vue载入速度优化（打包放服务器后加载很慢）
真是个老机灵鬼的博客
09-07 2481
把我优化vue载入速度的问题总结一下。 我的博客项目放在服务器后加载要18-20秒，其实这个问题拖了很久了，昨天才有时间处理一下。 之前以为是首页的mp4资源太大，但昨天看了后发现主要是vue打包后的js文件载入用了最多时间，如下图（优化前没截图，这个是优化后的。优化前大小是2m多，时间是十几秒） 带宽合格的服务器其实2m的文件用不到十几秒的，但我买的带宽是1Mbps （穷是原罪），速度太慢。 那么就从优化文件大小入手。 步骤： 1. 将路由改为懒加载，修改router文件 如下图，之前的写法是红色箭头
vue 调用图片（服务器和本地）
u011200562的博客
10-26 7338
一、本地（一般调用有三种办法） <script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命周期函数中设置 data(){
VUE3&PROJECT DAY02
qq_40185402的博客
11-28 565
`VueCli`项目中关于图片的处理，搭建项目基础结构，实现点击底部选项卡时，上半部分动态更新，实现`Index.vue`的静态页面的编写，进入`App`后，展示热映类别下的电影列表
vue-cli(vue脚手架)超详细教程
08-30
Vue CLI（vue脚手架）是一个官方提供的对Vue.js开发的脚手架工具，通过它我们可以快速初始化一个基于Vue.js的项目。下面是一个超详细的Vue CLI教程，包括如何安装、创建项目、常用命令等。 1. 安装Node.js：首先确保已经安装了Node.js，去Node.js官网下载安装包，按照指引完成安装。 2. 安装Vue CLI：打开命令行工具（如终端、命令提示符等），运行以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在命令行中进入你想要创建项目的目录，运行以下命令创建项目： ``` vue create project-name ``` 其中，`project-name`是你要创建的项目名称，可以根据需要自定义。 4. 选择项目配置：在创建项目的过程中，Vue CLI会让你选择一些项目配置，比如使用的包管理工具、需要的特性等，根据需要选择或者保持默认配置。 5. 运行项目：进入项目目录，运行以下命令启动项目： ``` cd project-name npm run serve ``` 6. 编写代码：打开项目目录，在`src`文件夹下可以看到`main.js`文件，这是项目的入口文件，可以在这里编写Vue代码。 7. 构建项目：完成代码编写后，运行以下命令构建项目： ``` npm run build ``` 这会生成一个可部署的静态网站文件放在`dist`目录下。 8. 常用命令： - `npm run serve`：启动开发服务器，实时编译和热重载。 - `npm run build`：构建生产环境的项目。 - `npm run lint`：检查和修复代码风格。 以上就是一个超详细的Vue CLI教程，希望能够帮到你入门Vue开发。如果想要进一步学习和掌握Vue CLI，建议查阅Vue CLI官方文档，了解更多详细信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值