vue-cli3 静态资源配置

Posted 2023-03-23

参考技术A 静态资源可以通过两种方式进行处理：
在 javascript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) ，以及CSS @import "./logo.png" 是相对的资源路径。在vue2.x版本类似assets文件夹。

2.public文件夹
public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。
在vue2.x版本类似static/ 文件夹。
/public/logo.png

参考： https://www.cnblogs.com/wzcsqaws/p/11283228.html

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中，各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。

除了 被 html-webpack-plugin 暴露的默认值 之外，所有 客户端环境变量 也可以直接使用。例如， BASE_URL 的用法：

vue-cli静态资源处理

　　vue-cli是利用webpack进行打包部署，其中静态资源的路径问题是一个比较麻烦的部分。

 

　　项目中共有两个存放静态文件的地方。

• /static 根目录下的static文件夹
• assets src目录下资源文件夹

　　/static 目录不会被webpack处理，build后复制到disk目录下，所以.vue中使用/static绝对目录引用的不会被webpack处理。

　　在组件中使用assets中的静态文件，通常有两种形式的引用：

　　　　1.img标签引用  <img src=\'./assets/logo.png\'/>

　　　　2.background背景图片引用 background:url(./assets/logo.png\');

　　webpack在处理.vue时会搜索这两类引用，处理方式稍有不同。

　　首先判断是否是绝对路径开头，如果是两种都不作处理，如果为相对路径先搜索该路径是否能在src中找到，如找到并且文件较小将被转为base64格式，如较大将重命名文件并将文件复制到static/img目录下(./assets/pic.png变为/static/img/pic.3472138.jpg）；  如果找不到，img将不做处理原样输出，但是background背景图会报错。

　　

　　如果想要打包输出的内容可在相对目录中访问可修改config/index.js中的