【vite】入门 publicDir 到高阶玩法

【vite】入门 publicDir 到高阶玩法

📌 使用方式

🧩 默认选项

publicDir默认选项为字符"public"，表示静态资源默认指向public。

import { defineConfig } from 'vite'
export default defineConfig({
  publicDir: 'public'
})

说明：在使用时，无需在路径前添加/public，比如public目录下有一张图片“1.jpg”。

✔️ <img src="/1.jpg" />

🧩 关闭该功能

publicDir设置为false，表示关闭此项功能。

import { defineConfig } from 'vite'
export default defineConfig({
  publicDir: false
})

说明：关闭此选项后，将无法使用根目录下默认的public作为资源引用目录

<!-- 图片资源路径错误 -->
❌ <img src="/1.jpg" />

<!-- 图片资源路径正确 -->
✔️ <img src="/public/1.jpg" />

🧩 相对路径

• 相对于项目根目录的相对路径

当然，不局限与将字符设置为"public"，你可以根据个人爱好或者习惯自定义一个名字，如"assets"。

publicDir 设置为字符 “assets”，表示静态资源默认指向 assets 目录。

import { defineConfig } from 'vite'
export default defineConfig({
  publicDir: 'assets'
})

说明：该目录可以放置你的静态资源，如/assets/vinca.jpg、/assets/vinca.mp4。
/vinca.jpg --> 封面图片，
/vinca.mp4 --> 视频文件。

✔️
<video muted autoplay loop controls playsinline poster="/vinca.jpg">
  <source src="/vinca.mp4" type="video/mp4" />
  <p>
    抱歉，你的浏览器不支持内嵌视频，不过不用担心，你可以
    <nuxt-link to="/vinca.mp4">下载</nuxt-link> 并用你喜欢的播放器观看！
  </p>
</video>

🧩 绝对路径

• 系统的绝对路径

__dirname它是node的一个全局变量，它的功能是输出当前项目的目录，如D:\test-project。在这里，我们通过该变量进行文件路径拼接实现。即 publicDir: ${__dirname}/images --> D:\test-project\images。

import { defineConfig } from 'vite'
export default defineConfig({
  publicDir: `${__dirname}/images`
})

说明：在使用时，你的images目录下需要有一张图片”1.jpg"。

✔️ <img src="/1.jpg" />

📌 全局静态资源

等价与 publicDir: false -> publicDir: ‘/’

import { defineConfig } from 'vite'
export default defineConfig({
  publicDir: '/'
})

• 多个静态资源目录，如 assets / images / public

✔️ <img src="/public/1.jpg" />

✔️ <img src="/assets/1.jpg" />

✔️ <img src="/images/1.jpg" />

📌 进阶

🧩 多个环境使用不同的静态资源目录

在不同的环境（如开发、测试、生产）中使用不同的静态资源目录，可以在 vite.config.js 中根据环境变量动态设置 publicDir。

项目结构：

my-project/
├── public_dev/
│   ├── favicon.ico
│   └── robots.txt
├── public_prod/
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── main.ts
│   └── App.vue
├── index.html
├── vite.config.ts
└── package.json

vite.config.js 配置文件：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  return {
    publicDir: mode === 'production' ? 'public_prod' : 'public_dev' // 根据环境变量设置静态资源目录
  }
})

🧩 动态加载不同环境的配置文件

可以通过环境变量动态加载不同的配置文件来指定 publicDir。

项目结构：

my-project/
├── config/
│   ├── dev.ts
│   └── prod.ts
├── public_dev/
│   ├── favicon.ico
│   └── robots.txt
├── public_prod/
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── main.ts
│   └── App.vue
├── index.html
├── vite.config.ts
└── package.json

config/dev.ts 文件：

// dev.ts
export default {
  publicDir: 'public_dev'
}

config/prod.ts 文件：

// prod.ts
export default {
  publicDir: 'public_prod'
}

vite.config.ts 配置文件：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  const config =
    mode === 'production' ? require('./config/prod').default : require('./config/dev').default
  return {
    publicDir: config.publicDir
  }
})

通过这种方式，可以更灵活地管理不同环境下的静态资源目录配置。

📌 总结

publicDir 是 Vite 中非常有用的配置项，可以帮助您轻松管理项目的静态资源。

通过上述常规和高级用法，您可以根据项目需求灵活地设置和使用静态资源目录。