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目录 需要在 源目录下。
例如项目结构如下,且配置srcDirsrca,则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)

运行效果

VitePress-11-静态资源引入- public目录的使用_第1张图片

打包后的目录

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

VitePress-11-静态资源引入- public目录的使用_第2张图片

你可能感兴趣的:(VitePress,VitePress,静态资源引入,public静态资源目录的使用,public目录资源引入方式)