为了回答这个问题,我们首先需要了解Webpack如何处理静态资产。在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL。例如,在 <img src="./logo.png">
和 background: url(./logo.png) 中,"./logo.png" 是相对的资源路径,将由Webpack解析为模块依赖

因为 logo.png 不是 JavaScript,当被视为模块依赖时,需要使用 url-loader 和 file-loader
处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader,因此可以使用相对/模块路径。

由于这些资源可能在构建过程中被内联/复制/重命名,所以它们基本上是源代码的一部分。这就是为什么建议将
Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上,甚至不必把它们全部放在 /src/assets:可以用模块/组件的组织方式来使用它们。例如,可以在每个放置组件的目录中存放静态资源。

"Real" Static Assets

相比之下,static/ 目录下的文件并不会被 Webpack 处理:它们会直接被复制到最终目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。如果更改 assetSubDirectory 的值为 assets,那么路径需改为 /assets/[filename]

有时我们需要修改nodeModule中的源码,插件源码修改后,打包后的文件应放在static目录。如果放在其他目录,webpack会重新打包,导致出现例如:did you register the component correctly? 这个组件报错

vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)的更多相关文章

  1. openfire源码修改后如何打包部署到linux服务器上

    原文:http://blog.csdn.net/jinzhencs/article/details/50457152 1.linux版本的3.10.3解压部署启动(过程略,参考我的另一篇博文http: ...

  2. 鸿蒙内核源码分析(挂载目录篇) | 为何文件系统需要挂载 | 百篇博客分析OpenHarmony源码 | v65.01

    百篇博客系列篇.本篇为: v65.xx 鸿蒙内核源码分析(挂载目录篇) | 为何文件系统需要挂载 | 51.c.h.o 文件系统相关篇为: v62.xx 鸿蒙内核源码分析(文件概念篇) | 为什么说一 ...

  3. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  4. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  5. 曹工说Spring Boot源码(13)-- AspectJ的运行时织入(Load-Time-Weaving),基本内容是讲清楚了(附源码)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  6. vscode源码编译运行打包使其由英文变为中文

    vscode默认是英文,如果你想让其变为中文,可参考这个链接:https://blog.csdn.net/testcs_dn/article/details/75070415 最近发现一个很奇怪的问题 ...

  7. Vue.use()源码分析且执行后干什么了

    直接开始分析源码 // Vue源码文件路径:src/core/global-api/use.js import { toArray } from '../util/index' //initUse函数 ...

  8. webpack4.0源码解析之打包后js文件分析

    首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...

  9. RHEL5.8上SAMBA源码修改打包安装流程

    之前一直使用系统自带的SAMBA,近期需要对SAMBA代码做一些修改,然后还是打算用RPM包的方式来安装部署. 这个流程本身不复杂,在这里记录下来,免得在另外写说明文档. 关键词:RHEL5.8, s ...

随机推荐

  1. oracle存储过程及sql优化-(三)

    接下来介绍上篇接触到的存储过程中的sql语句 insert into TMP_GT3_sbfgl_WJSTJB SELECT NSR.NSRSBH, NSR.NSRMC, NSR.SCJYDZ, ca ...

  2. git设置mergetool可视化工具

      可以设置BeyondCompare,DiffMerge等作为git的比较和合并的可视化工具,方便操作. 设置如下: 先下载并安装BeyondCompare,DiffMerge等. 设置git配置, ...

  3. webpack 最新版

    之前说过老的版本,webpack@3.8.1 这个版本,现在我们来看看,新版本和老版本的区别 webpack 4 以上的版本 npm 全称 node package manager (node 包管理 ...

  4. Docker-----版本选择

    版本演变 17.03 版本以前 Docker CE 在 17.03 版本之前叫 Docker Engine, Docker Engine 的版本号范围: 0.1.0 ~ 1.13.1 17.03 版本 ...

  5. leetcode 160相交链表

    暴力解法当然可以遍历两个链表,不过time O(mn) space O(1)暂且不说, 方法一:双指针, time O(m+n),space O(1) 可以对比判断环形链表的快慢指针法. 这种方法构思 ...

  6. 【html】合并单元格,并居中显示文本

     现状: 想要实现的效果: 代码实现: <tr> <td colspan=" align="center">用例失败为0,无测试详情</td ...

  7. Python基本语法_函数_参数的多类型传值

    前言 上一篇主要介绍了Python函数的参数类型,本篇继续学习Python函数多类型传值. 目录 前言 目录 软件环境 参数的多类型传值 向函数传递Tuple 向函数传递List 向函数传递Dicti ...

  8. windows触摸板速度调整

    Windows 触摸板滚动速度调整:   在注册表中: The magic key is: Computer\HKEY_CURRENT_USER\Software\Microsoft\Wisp\Tou ...

  9. 四十一:数据库之SQLAlchemy之limlt、、slice、offset及切片

    一:limit:限制每次查询的时候查询数据的条数二:slice:查一个区间的数据,slice(起,止)三:offset:限制查找数据的时候过滤掉前面多少条四:切片:对query对象切实获取想要的数据 ...

  10. 使用ssh-agent管理私钥

    使用ssh-agent的好处: 如果有多台远程服务器与多个私钥文件,ssh-gent将会尝试使用不同的私钥文件建立连接,直至成功 假如有 A.B.C 三台服务器,A是控制节点,A可以直接登录B,但是无 ...