为了回答这个问题，我们首先需要了解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. pygame的常用模块

    加载图片: pygame.image.load("图片名称") eg:xiaojiejie = pygame.image.load("./data/a/o/l/t/i/p ...

  2. C++入门经典-例2.15-逗号表达式的应用

    1:代码如下: // 2.15.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include<iostream> using na ...

  3. 四、smarty模板的自定义函数

    smarty模板的自定义函数(这里介绍的是常用) 分为三个种类: 1.  变量调节器 2.  函数 3.  块函数 三个种类插件的用法: 1.  变量调解器的用法, <{$var|myfun:a ...

  4. yconsole使用说明

    介绍: yconsole是yhd用于管理缓存的工具(python实现),它的主要功能是为各个应用分配和管理缓存,以及错误修复.和它配合使用的还有ycache-client.yagent.zookeep ...

  5. leetcode-easy-string- 125 Valid Palindrome

    mycode   9.62% class Solution(object): def isPalindrome(self, s): """ :type s: str :r ...

  6. CentOS 6.4编译安装和部署Zabbix 2.0版本监控（中文）

    [一].zabbix简介 zabbix是一个基于web界面的提供分布式系统监视以及网络监视功能的企业级开元解决方案 zabbix由2部分构成,zabbix_server和可选组件zabbix_agen ...

  7. Windows下的Crontab表达式解析DLL的使用

    Linux的crontab工具特别的好用,正好现在工作总有好多定时执行的事 用Windows的定时任务觉得特别Low,哈哈,用C#写个任务触发器 然后再用上Crontab表达式解析DLL,觉得马上就高 ...

  8. IDEA里面maven项目使用maven插件tomcat启动项目

    1.首先在pom.xml添加tomcat插件依赖: <?xml version="1.0" encoding="UTF-8"?> <proje ...

  9. python之openpyxl生成excel文件

    项目需要,需要自动生成PDF测试报告.经过对比之后,选择使用了reportlab模块. 项目背景:开发一个测试平台,供测试维护测试用例,执行测试用例,并且生成测试报告(包含PDF和excel),将生成 ...

  10. apache虚拟目录配置实例

    apache虚拟目录配置实例 一.首先,开启虚拟主机配置 在文件httpd.conf中找到: include conf/extra/httpd-vhosts.conf #开启 二.对httpd-vho ...