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静态资源处理的更多相关文章

  1. vue cli 静态资源导入 路径

    1.public文件夹 使用绝对路径引入. 2.assets文件夹 使用相对路径引入. https://cli.vuejs.org/zh/guide/html-and-static-assets.ht ...

  2. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  3. vue打包静态资源路径不正确的解决办法【转】

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...

  4. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  5. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

  6. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  7. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  8. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  9. Vue中的~（静态资源处理）

    Webpacked 资源 首先要理解webpack是怎样处理静态资源的. 在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资 ...

  10. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

随机推荐

  1. C# 数组深拷贝

    数组深拷贝,即完全复制出一份新的数组,两个数组内容完全相同. 一般有四种方法: 1. 循环遍历复制 2. 数组的成员方法:CopyTo CopyTo方法用作将源数组全部拷贝到目标数组中,可以指定目标数 ...

  2. C# 利用反射将枚举绑定到下拉框

    前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...

  3. http Socket长连接

    文档:http://www.cocoachina.com/ios/20160602/16572.html socket(套接字)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行网 ...

  4. Jave Web阿里云短信服务发送验证码

    首先得在阿里云根据流程开通短信服务,申请签名和模版,具体看文档 因为这是个web项目,用到了thymeleaf模板,所以在pom.xml中加入如下依赖 <dependency> <g ...

  5. centos7: ifconfig出现command not found解决办法

    问题 说下我linux配置情况,不一样的可以选择借鉴我的办法. 在虚拟机中以最小化方式安装centos7,ifconfig命令无效,而且在sbin目录中没有ifconfig文件. 原因 这是因为cen ...

  6. python-原型模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明 原型模式关注的是大量相同对象或相似对象的创建问题,意图在于通过复制一个已经存在的实 ...

  7. 锋利的Jquery之插件Cookie记住密码

    先下载Jquery cookie js ,下载路径: http://plugins.jquery.com/cookie/ 记住,jquery的包要放在cookie的包前面,否则会产生异常 <!D ...

  8. 防范跨站脚本攻击（XXS）的关键手段

    1:加强对提交信息和页面显示信息的过滤,让非法提交内容无处施展: 2:让存储在cookie中的sessionid 无法被js 读取到. 如今的xss 相比网上很多资料中,在技术上已经发生了很大变化.由 ...

  9. ActiveReports 报表控件V12新特性 -- 新增JSON和CSV导出

    ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...

  10. 【Python】opencv显示图像

    import cv2 img = cv2.imread("lena.jpg") cv2.namedWindow("Image") cv2.imshow(&quo ...