VitePress-11-静态资源引入- public目录的使用

作用简述

public目录就是一个存放静态资源的目录。
项目中可以通过【绝对路径】的方式进行引入。
具体的格式请继续阅读本文剩下的内容。

知识补充-源目录(比较重要)

源目录 的概念 ： 是markdown源文件所在的位置。

默认情况下，源目录与项目的根目录保持一致。
例如项目结构如下：

projectName
	| -- .vitepress  # 项目的配置目录
	| -- index.md    # markdown的源文件
	| -- srca
		| -- a.md

则 源目录 和 项目根目录 就是projectName这个文件夹。
文件访问 http://localhost:5173/index.html 就访问到了 index.md 文件;
文件访问 http://localhost:5173/srca/a.html 就访问到了 srca/a.md 文件

可以通过在配置文件中修改srcDir属性的值进行重新定义源目录的位置。
例如项目结构如下：

projcetName
	| -- .vitepress    # 项目的配置目录
	| -- srca
		| -- index.md  # markdown的源文件

项目的配置文件中指定了srcDir的属性值为 ：srca；
则 源目录 就是projectName/srca这个文件夹,所有的markdown文档都需要放在这个目录下;
而 项目根目录 仍然是 projectName 这个文件夹。
文件访问 http://localhost:5173/index.html 就访问到了 srca/index.md 文件

更多关于【源目录】的内容可以参考博客 ： VitePress中源目录的使用和自定义源目录的位置

public 目录举例说明它的位置

public目录 需要在 源目录下。
例如项目结构如下，且配置srcDir为srca，则public目录就是 projectName/srca/public：

projectName
	| -- .vitepress 		# 项目配置文件
	| -- srca 				# 源目录
		| -- a.md 			# markdown文档
		| -- public 		# public 目录
			| -- abc.png 	# 静态资源文件

public目录的作用特性

特性1

使用根绝对路径来引用放置在 public 中的文件。
例如，public/icon.png 应始终在源代码中使用 /icon.png 引用。

特性2

放置在 【public 中的资源】将按原样复制到【输出目录】的【根目录】中。

特性3（了解）

引用在public目录下的静态资源，无需担心部署时的URL是否是在根URL上。

例如 ：https://www.abc.com 这种默认的访问是在根URL上；

但是，在项目中添加了配置 ： base:'/aaa/'，表示项目访问需要添加前缀/aaa/，
即 >:https://www.abc.com/aaa/xxxx.html，这种就表示不是在根URL上。

所有静态资源路径都会被自动处理，来适应不同的 base 配置值.
这也是 public 的一大优势。

案例 - 对上述特性的展示

本案例将详细展示一下 上述public目录的两个特性。

项目结构

本项目未做srcDir 的配置，
因此源目录和根目录一致，都是项目目录projectName;
所以，public目录就直接放置在projectName下。

也未做base配置，因此是根URL访问，就是访问的时候没有任何的前缀。

projectName
	| -- .vitepress
	| -- helloworld.md # markdown文档
	| -- public        # 静态资源目录
		| -- def.jpg   # 具体的一个静态图片

文档内容

特别注意 ： 引用图片时的写法：/def.jpg

	# 在public目录下的静态资源
	> 下面是public中的图片
	
	![索隆](/def.jpg)

运行效果

打包后的目录

打包后，在public 目录中的静态资源，直接原样复制到了 dist目录下，
而dist 目录就是我们所说的 【输出目录】的【根目录】。