为了回答这个问题,我们首先需要了解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. C++如何限制对象在堆上或栈上生成

    1,限制类的对象只能生成在栈上 将 operator new 各种原型设为私有 #include <iostream> class OnlyOnStack { public: OnlyOn ...

  2. leetcode-easy-listnode-21 merge two sorted lists

    mycode 一定要记得创建两个头哦,一个找路,一个找家 # Definition for singly-linked list. # class ListNode(object): # def __ ...

  3. Dark 运算符

    1 赋值运算符 ??= b ??= "hello" 若b为空,则把"hello"赋给b . 2 三目运算符 boolean ? expression1 : ex ...

  4. leetcode23 合并k个排序链表

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  5. nohup及pip命令总结

    最近在搭建Python的Web开发环境的时候,用到nohup和pip等一些工具,先简单总结一下,以备后续查用. 1.nohup nohup(no hang up)就是不挂断的意思,如果你正在运行一个进 ...

  6. React之js实现跳转路由

    1.新增知识 /* 实现js跳转路由:https://reacttraining.com/react-router/web/example/auth-workflow 1.要引入Redirect im ...

  7. OpenStack 2018 年终盘点

    目录 文章目录 目录 前言 OpenStack 一年来的成长 Nova Cinder Neutron Ironic Cyborg Octavia Kolla Magnum Zun Kuryr 从 Op ...

  8. 【Java学习笔记】LinkedList JDK1.6

    如下一段代码,在JDK1.6的LinkedList中,是下图这样存储的.有一个节点值为null的节点,叫做header,header的next是0,3的next是header,这是一个循环链表 Lin ...

  9. JavaScript编程精解 初读笔记

    1.1 值 JavaScript里有6种基本类型的值: number.string.Boolean.object.function和undefined. 1.3.2 prompt和confirm 浏览 ...

  10. value(C# )

    上下文关键字 value 用在普通属性声明的 set 访问器中. 此关键字类似于方法的输入参数. 关键字 value 引用客户端代码尝试分配给属性的值. 在以下示例中,MyDerivedClass 有 ...