vue+element 学习之路（十）vue-cli中assets和static

最新推荐文章于 2023-01-03 17:22:13 发布
最新推荐文章于 2023-01-03 17:22:13 发布
阅读量791 收藏 2
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39327044/article/details/89790594
在Vue CLI项目中，assets和static目录都用于存放静态文件。assets下的文件会被webpack打包，支持相对路径引用；static中的文件不被处理，可直接用绝对路径引用。在webpack构建过程中，assets中的图片等资源需要通过require引入，而static中的资源可直接通过URL引用。

在vue-cli中，assets和static都是存放静态文件的目录，区别在于，static中的文件不会被webpack处理，可以直接以绝对路径引用，而assets中的文件会被webpack打包进代码中，相当于代码的一部分，只支持相对路径引用，bulid的时候由webpack解析为模块依赖。

webpack处理静态资源的机制：在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径，并且会被Webpack视为一个模块依赖来解析。

举个栗子

assets 和 static下分别有logo.png
在这里插入图片描述

（1）assets

静态图片引用，正常显示
在这里插入图片描述在这里插入图片描述
动态图片引用，图片无法读取
在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
nodeJs + webpack+vue+ element ui 环境安装
GIS摆渡人
04-18 669
文章目录一.安装nodeJs二.安装vue三.创建新项目四.使用vue-cli再一次创建新项目四.引入Elements ui五.运行已有项目六.补充安装axios +sass+store(1).安装axios(ajax的封装）(2).安装sass(3).安装store(4).引入jq(5).安装css-loader(6).安装better-scroll(7).vue项目添加一些触摸事件以及fastclick的支持(8).vue项目配置了babel-polyfill 兼容低版本浏览(9).配置jsonp(10
Vue+ElementUI+Electron环境搭建及程序打包
最新发布
qq_32863863的博客
08-29 914
2.安装完成后,新建目录”node_cache“ ”node_global“1.shift+鼠标右键打开PowerShell窗口,新建vue项目。2.在dist目录下新建main.js,package.json。5.执行npm run build, 打包项目。2.npm run dev 运行该项目。修改: package.json。1.下载并安装Node.js。3.electron 运行。执行electron .3.新建及修改环境变量。2.修改main.js。3.修改App.vue。
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
08-27
主要介绍了Vue-cli中的静态资源管理（src/assets和static/的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中文件路径绑定与assets、static两个文件夹的关系
xuquanxi1079的博客
02-26 666
在Vue的开发中经常碰到需要动态绑定文件路径的需求，如：一个img的src属性绑定url变量，但是绑定完后图片却不显示。许多情况下是因为没有弄清楚文件存放的位置而引起的错误，在此做个记录。 常见的文件存放位置有assets、static这两个文件夹。网上对于这两个文件夹的区别解释有很多，我摘抄了一个说法：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接...
vue-cli静态目录 static和assets
w_t_y_y的博客
10-15 1870
用vue-cli生成一个项目后，src目录下的assets目录和根目录下的static目录都是存放静态文件的。 assets里的文件编译过程中会被webpack处理理解为模块依赖，只支持相对路径的形式。assets放可能会变动的文件； static里的文件不会被webpack解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件。static放不会变动的文件。如放置下载模板：<a href="static/download/user.xlsx" downloa
vue-cli搭建项目中 assets与static 文件 的区别
weixin_42060658的博客
01-17 549
相同点：资源在html中使用，都是可以的。 不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。 assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，...
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9510
未完
vue+Element后台管理系统框架搭建（一）
sinat_33564062的博客
11-27 9414
vue+Element后台管理系统框架搭建vue框架搭建及开发规范1.1环境配置1.2项目创建1.开始搭建项目vueProject2.打开我们的项目，可以看到如下的目录结构：1.3开发规范1.vueProject的目录结构：2.项目创建及命名规范2.vue2.0概念和语法2.1 Vue.js的目的2.2 Vue.js特性1.MVVM模式2.4 Vue核心思想1.数据驱动2.组件化3.指令系统4.V...
vue-cli2 中 assets 和 static 文件夹的区别
Wayne8016的博客
02-22 1654
相信有很多小伙伴在刚开始学习 vue 的时候都傻傻分不清楚，assets 和 static 文件夹的区别。下面我就来简单说一下它们之间的不同之处。 assets目录中的文件会被webpack处理解析为模块依赖 然后，它只支持相对路径的形式。 static/ 目录中的文件不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。 然后，必须使用绝对路径引用...
vue JS 引用图片
Tiny2017的博客
12-17 526
VUE CLI中，静态资源可以通过两种方式进行处理：Vue Cli 文档 1.在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。 <img src="...">,background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。 如url(./image.png) 会被翻译为 require(’./image.png’) <img src="./image.png"&gt
vue-cli 自定义路径别名 assets和static文件夹的区别 --save-dev和--save的区别
weixin_33709590的博客
09-19 249
写在前面： 这是一篇vue-cli的几个小知识点简单介绍，适用于刚接触vue-cli脚手架以及对此方面并不太了解的同学，大佬们绕道。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 静态资源处理： assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能...
vue散记：vue-cli3中public目录和assets目录的区别
tianjiliuhen的博客
05-27 7745
vue散记：vue-cli3中public目录和assets目录的区别前言vue-cli3工程中public和assets的区别1.vue build 打包2.assets 和 public 的区别2.1 public目录2.2 assets目录 前言   之前使用过别人写的vue+element项目，在别人搭建好的框架下修修改改、缝缝补补，感觉还行，整体流程还能走的通，但是不能总是用别人搭建好的框架啊。于是就想着自己也用vue-cli搭建一套，搭建的过程中也遇到了些问题，有些不理解的，就记下来，因为比较散
vue中改elementUI默认样式引发的static 与 assets的区别
weixin_33672109的博客
10-26 492
首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调，比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的，可是老板喜欢很黄，非要用yellow色。
Vue element-ui 组件使用过程中产生的问题汇总（持续更新）
WuqibuHuan的博客
06-30 1356
这里做下平时用到组件时 产生的问题记录 ①.关于ElementUI导航组件el-menu刷新页面后恢复默认问题 <el-menu :default-active="activeIndex" router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 > // index值设置为路由path <el-menu-item index="/">首页</el-menu-item> <
vue2中如何将assets文件夹中的图片提前预加载
weixin_35749786的博客
01-03 1107
在 Vue 2 中，你可以使用 webpack 的静态资源处理能力来将 assets 文件夹中的图片提前预加载。 首先，你需要将图片文件放入 assets 文件夹中。 然后，在你的 Vue 组件的 template 中使用 require 或 import 语句来引入图片。例如： <template> <img src="require('@/assets/my-im...
vue assets和static文件夹的作用
zeroyulong的博客
05-10 6924
assets里面的会被webpack打包进你的代码里，而static里面的，就直接引用了。一般在static里面放一些类库的文件，在assets里面放属于该项目的资源文件。Webpacked Assets在 *.vue 组件中，所有模板和CSS都会被 vue-html-loader 及 css-loader 解析，并查找资源URL。例如，在 &lt;img src="./logo.png"&gt;...
Vue之assets图片加载不出来
weixin_52418790的博客
09-24 5701
说明 assets和static连个文件都是存放静态资源的目录 在html下使用它们是无差别的，但是在js中使用的话，assets中资源的路径要经过webpack中file-loader编译，不能直接写。 而static中的文件，不会经过编译，项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。 二者中的图片资源，html页面可以直接使用；但在动态循环绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。 解决 一、
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
热门推荐
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
Vue Element-UI实战：构建管理后台与关键组件教程
你需要在项目中添加以下关键模块：Vue（版本2.5.2），Vue Router（版本3.0.1）用于导航管理，Element UI（版本2.0.7）作为前端界面库，以及Axios（版本0.17.1）用于处理HTTP请求。 项目的目录结构包括： 1. `build...