vue-cli静态资源处理
vue-cli是利用webpack进行打包部署,其中静态资源的路径问题是一个比较麻烦的部分。

项目中共有两个存放静态文件的地方。
- /static 根目录下的static文件夹
- assets src目录下资源文件夹
/static 目录不会被webpack处理,build后复制到disk目录下,所以.vue中使用/static绝对目录引用的不会被webpack处理。
在组件中使用assets中的静态文件,通常有两种形式的引用:
1.img标签引用 <img src='./assets/logo.png'/>
2.background背景图片引用 background:url(./assets/logo.png');
webpack在处理.vue时会搜索这两类引用,处理方式稍有不同。
首先判断是否是绝对路径开头,如果是两种都不作处理,如果为相对路径先搜索该路径是否能在src中找到,如找到并且文件较小将被转为base64格式,如较大将重命名文件并将文件复制到static/img目录下(./assets/pic.png变为/static/img/pic.3472138.jpg); 如果找不到,img将不做处理原样输出,但是background背景图会报错。
如果想要打包输出的内容可在相对目录中访问可修改config/index.js中的
vue-cli静态资源处理的更多相关文章
- vue cli 静态资源导入 路径
1.public文件夹 使用绝对路径引入. 2.assets文件夹 使用相对路径引入. https://cli.vuejs.org/zh/guide/html-and-static-assets.ht ...
- vue打包静态资源路径不正确的解决办法
vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...
- vue打包静态资源路径不正确的解决办法【转】
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...
- vue+webpack静态资源路径引用
处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...
- vue打包静态资源后显示空白及static文件路径报错
1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...
- Vue Cli 打包之后静态资源路径不对的解决方法
cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
- Vue Cli 3 打包上线 静态资源404问题解决方案
报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...
- Vue中的~(静态资源处理)
Webpacked 资源 首先要理解webpack是怎样处理静态资源的. 在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资 ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
随机推荐
- 深入出不来nodejs源码-events模块
这一节内容超级简单,纯JS,就当给自己放个假了,V8引擎和node的C++代码看得有点脑阔疼. 学过DOM的应该都知道一个API,叫addeventlistener,即事件绑定.这个东西贯穿了整个JS ...
- 手机调试 ---- Node启动服务
最近刚开始做手机端Web网站, 在这段时间遇到过很多坑.比如各个安卓手机的JS兼容性问题,以及安卓手机与苹果手机的差异化. 最近在做一个需求.进入手机站点主页,会弹出置顶APP下载框,用户点击图片,如 ...
- WPF备忘录(3)如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter
一.如何从 Datagrid 中获得单元格的内容 DataGrid 属于一种 ItemsControl, 因此,它有 Items 属性并且用ItemContainer 封装它的 items. 但是,W ...
- WPF--模板选择
典型的,把模板关联到一块特定的数据上,不过通常希望动态的确定使用哪个模板---既可以基于一个属性值,也可以是一个全局状态.当真正需要大规模替换模板时,也可以使用DataTempl ...
- #if _MSC_VER > 1000 #pragma once #endif 含义
前提:MFC应用程序中,MainFrm 类头文件 MainFrm.h 中#if _MSC_VER > 1000#pragma once#endif // _MSC_VER > 1000解释 ...
- 【MongoDB-query查询条件】
在上一篇中简要使用了C# 对MongoDB进行数据操作,这里补充一些MongoDB query查询条件文档: Query.All("name", "a",&qu ...
- gulp自动添加版本号过程中的一些要点记录
1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[orig ...
- grafana启用mysql作为的后台数据库
vim grafana-5.4.2/conf/defaults.ini grafana默认使用sqlite3使用后台数据库,可选用mysql,postgres,sqlite3. 重新启动 注意: gr ...
- codevs1735 方程的解数(meet in the middle)
题意 题目链接 Sol 把前一半放在左边,后一半放在右边 meet in the middle一波 统计答案的时候开始想的是hash,然而MLE了两个点 实际上只要排序之后双指针扫一遍就行了 #inc ...
- 优雅高效的免费在线APP原型工具
前往:xiaopiu 打开浏览器即可享受软件级的流畅体验!云端组件库.交互动效自定义.高效友好的操作方式让您的创意即刻呈现!