首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的。

1、assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。build的时候由Webpack解析为模块依赖。

 2、static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
    任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。
  所以如果需要引用static目录下的图片及其他资源,应该使用绝对路径,webpack配置如下:

vue 项目中assets文件夹与static文件夹引用的区别的更多相关文章

  1. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  2. vue 项目中assets 和static的区别

    一.Webpacked Assets 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-lo ...

  3. 踩坑,vue项目中,main.js引入scss文件时报错

    当我们在src目录下创建.scss文件,并在main.js中引用,运行时会报: ERROR Failed to compile with 1 errors 5:25:07 PMThis relativ ...

  4. vue项目中使用bpmn-基础篇

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...

  5. vue项目中使用bpmn-自定义platter

    前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...

  6. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  7. vue项目中使用bpmn-节点篇

    前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...

  8. vue项目中使用bpmn-为节点添加颜色

    内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...

  9. vue项目中使用bpmn-番外篇(留言问题总结)

    前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...

随机推荐

  1. 【BZOJ】1622: [Usaco2008 Open]Word Power 名字的能量(dp/-模拟)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1622 这题我搜的题解是dp,我也觉得是dp,但是好像比模拟慢啊!!!! 1400ms不科学! 设f[ ...

  2. java.lang.ClassNotFoundException: org.codehaus.jackson.JsonProcessingException 异常解决方案

    在SpringMVC中使用Jackson实现json输出时配置如下: <!-- 输出对象转JSON支持 --> <bean id="stringConverter" ...

  3. python pycurl属性

    pycurl.Curl() #创建一个pycurl对象的方法 pycurl.Curl(pycurl.URL, http://www.google.com.hk) #设置要访问的URL pycurl.C ...

  4. 获取软件的apk包名、查看手机设备名称等

    获取软件的apk包名 1.下载aapt,这里使用的是SDK自带的aapt,找到SDK路径下面的aapt.exe,本机路径:E:\downloads\android-sdk_r23.0.2-window ...

  5. oracle11g安装完成后修改字符集

    author : headsen chen date:2018-05-10  10:27:16 oracle11g完成安装后,由于默认安装的时候无法指定字符集,所以手动修改字符集和10g版本一样的字符 ...

  6. jQuery设置内容和属性方

    何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...

  7. python--get_data_from_csv_or_txt

    一.从csv文件中获取 import osimport csv class GetDataFromCsvFile(): def __init__(self, csv_file, params_list ...

  8. C语言实现双链表(带头节点)

    双链表和单链表性质相似只是在多加了一个前指针 1.定义结构体 typedef struct Node{ int data; struct Node *prior; struct Node *next; ...

  9. 巨蟒python全栈开发flask13项目开始5

    1.Toy回复App消息 2.离线维度消息数量存储 3.Toy批量收取消息 4.Toy主动发起消息&&AI对接 5.Toy_info 1.Toy回复App消息 2.离线维度消息数量存储 ...

  10. where both the key and the value are strings

    Environment Variables (The Java™ Tutorials > Essential Classes > The Platform Environment) htt ...