vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)
为了回答这个问题,我们首先需要了解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目录)的更多相关文章
- openfire源码修改后如何打包部署到linux服务器上
原文:http://blog.csdn.net/jinzhencs/article/details/50457152 1.linux版本的3.10.3解压部署启动(过程略,参考我的另一篇博文http: ...
- 鸿蒙内核源码分析(挂载目录篇) | 为何文件系统需要挂载 | 百篇博客分析OpenHarmony源码 | v65.01
百篇博客系列篇.本篇为: v65.xx 鸿蒙内核源码分析(挂载目录篇) | 为何文件系统需要挂载 | 51.c.h.o 文件系统相关篇为: v62.xx 鸿蒙内核源码分析(文件概念篇) | 为什么说一 ...
- vue中$watch源码阅读笔记
项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...
- 百度ueditor vue项目应用 -- 图片上传源码修改
本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...
- 曹工说Spring Boot源码(13)-- AspectJ的运行时织入(Load-Time-Weaving),基本内容是讲清楚了(附源码)
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- vscode源码编译运行打包使其由英文变为中文
vscode默认是英文,如果你想让其变为中文,可参考这个链接:https://blog.csdn.net/testcs_dn/article/details/75070415 最近发现一个很奇怪的问题 ...
- Vue.use()源码分析且执行后干什么了
直接开始分析源码 // Vue源码文件路径:src/core/global-api/use.js import { toArray } from '../util/index' //initUse函数 ...
- webpack4.0源码解析之打包后js文件分析
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...
- RHEL5.8上SAMBA源码修改打包安装流程
之前一直使用系统自带的SAMBA,近期需要对SAMBA代码做一些修改,然后还是打算用RPM包的方式来安装部署. 这个流程本身不复杂,在这里记录下来,免得在另外写说明文档. 关键词:RHEL5.8, s ...
随机推荐
- SQL 表 数据备份
insert into SMTTemporarySave select * from [MSV0CIMDB].[PICS_20170706].dbo.SMTTemporarySave
- Tomcat指定JDK
那么当有多个JDK时,是否可以为Tomcat这类应用程序指定对应的JDK版本 如下图,只需修改catalina.sh 即可,不需要修改“tomcat/bin/setclasspath.sh” . “t ...
- Windows环境下Mysql 5.7读写分离之使用mysql-proxy练习篇
本文使用mysql-proxy软件,结合mysql读写分离,实现实战练习. 前期准备: 三台机器: 代理机,IP:192.168.3.33 mysql Master,IP:192.168.3.32 m ...
- WPF图标拾取器
<Grid x:Name="LayoutRoot"> <Border BorderBrush="> <Border.Effect> & ...
- ORACLE官方全托管驱动 Oracle.ManagedDataAccess 12.1.0.1.0
以前用Oracle的时候,必须得装他臃肿的客户端,网上虽然也有提供直连Oracle的驱动,但也是要收费的,最近Oracle终于开窍了,提供了官方的全托管驱动. 这次是随Oracle ODAC 12c ...
- zookeeper源码分析:选举流程和请求处理
集群启动: QuorumPeerMain. runFromConfig() quorumPeer.start(); loadDataBase(); cnxnFactory.start(); ...
- OpenvSwitch/OpenFlow 架构解析与实践案例
目录 文章目录 目录 前言 软件定义网络(SDN) 虚拟交换机(vSwitch) 为什么说云计算时代的 SDN 非常重要 OpenFlow 简介 Open vSwitch Open vSwitch 的 ...
- Selenium 2自动化测试实战19(下载文件)
一.下载文件 webDriver允许设置默认的文件下载路径,也就是说,文件会自动下载并且存放到设置的目录中.下面以火狐浏览器为例,执行文件的下载. #downfile.py # -*- coding: ...
- 阶段3 2.Spring_02.程序间耦合_5 编写工厂类和配置文件
先把dao的实现复制一份到别的地方.然后删除项目里面的AccountDaoImpl这个dao的实现类 删除 service层就开始报错了 这个时候运行直接报错 把文件复制回来就不报错了 解决依赖关系 ...
- 十四:jinja2过滤器之常用的过滤器
1.abs:返回一个数的绝对值(见上一篇)2.default:如果当前变量没有值或字段,则展示默认值(见上一篇) 3.转义过滤器:如果后端出过来的值含html标签,可以控制是否视为html标签执行或者 ...