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 ...
随机推荐
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- C++入门经典-例6.8-gets_s与puts的应用
1:使用标准输入函数cin和格式化输入函数scanf时都存在这样一个问题:当输入空格时,程序不会接受空格符之后的内容内容. 输入函数gets_s与输出函数puts都只以结束符'\0'作为输入\输出结束 ...
- scrum例会报告+燃尽图02
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9955 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...
- php 发送邮件(1)代码逻辑
tp3.2 使用phpmailer发送短信邮箱 准备工作 1.thinkphp3.2 2.qq邮箱(开通过POP3/SMTP服务)在qq邮箱内,设置->账户->POP3/IMAP/SMTP ...
- 在RHEL6_Oracle_Linux_6上生成正确的udev_rule_规则文件
1. #首先确认是 Linux 6.0以上版本 [root@vrh6 dev]# cat /etc/issue Oracle Linux Server release 6.2Kern ...
- 再谈 Devstack(Rocky)
目录 文章目录 目录 前言 网络拓扑 运行环境 要点 步骤 前言 之前写过一篇<Openstack 实现技术分解 (1) 开发环境 - Devstack 部署案例详解>,随着 Devsta ...
- Linux_LVM&Quota
目录 目录 磁盘分区RHEL6 磁盘管理指令 mount fdisk lvm LVM图形化 quota quota指令 磁盘分区RHEL6 磁盘管理指令 cfdisk -l 查询分区状况 df -Th ...
- git clone 指定分支操作
服务器迁移,而且原来本地开发是在同一个目录中切换不同的分支,感觉有点挫,于是打算一个文件目录对应一个分支,这样不会有太大的文件差异. 记录下来本次操作,可能以后还会用到. git初始化一般是这样. g ...
- gin框架教程一: go框架gin的基本使用
我们在用http的时候一般都会用一些web框架来进行开发,gin就是这样的一个框架,它有哪些特点呢 一:gin特点 1.性能优秀2.基于官方的net/http的有限封装3.方便 灵活的中间件4.数据绑 ...
- Cocos2d-X多线程(2) 线程的互斥量std::mutex和线程锁
多个线程同时访问共享资源时,经常会出现冲突等.为了避免这种情况的发生,可以使用互斥量,当一个线程锁住了互斥量后,其他线程必须等待这个互斥量解锁后才能访问它. thread提供了四种不同的互斥量: 1. ...