Vite 项目结构规范

推荐的目录结构

📂 your-vite-project/
├── 📂 public/               # 存放静态资源（不会被 Vite 处理，直接原样提供）
│   ├── 📂 assets/           # 例如 logo、favicon
│   ├── 📂 libs/             # 第三方库（如未通过 npm 安装的 js/css）
│   ├── favicon.ico
│   └── robots.txt
├── 📂 src/                  # 源代码目录
│   ├── 📂 assets/           # 存放需要被 Vite 处理的资源（CSS、JS、图片等）
│   │   ├── 📂 styles/       # 全局样式文件（SCSS、CSS）
│   │   ├── 📂 scripts/      # 自定义 JS 逻辑
│   │   ├── 📂 images/       # 需要 import 进组件的图片
│   │   └── index.css        # 入口 CSS 文件
│   ├── 📂 components/       # 组件（Vue/React）
│   ├── 📂 pages/            # 页面级组件
│   ├── 📂 layouts/          # 布局组件
│   ├── main.js              # 入口文件（引入 CSS、JS）
│   └── App.vue / App.jsx    # 主应用组件
├── 📜 index.html            # 主 HTML 入口
├── 📜 vite.config.js        # Vite 配置文件
└── 📜 package.json          # 依赖管理

CSS 和 JS 的存放建议

如何引入 CSS 和 JS

1. 在 main.js 里引入全局 CSS

js复制编辑import './assets/styles/main.css';
import 'bootstrap/dist/css/bootstrap.min.css'; // 通过 npm 安装的库

2. 在 main.js 里引入全局 JS

js复制编辑import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // 通过 npm 安装的库
import './assets/scripts/custom.js'; // 自定义 JS

3. 在 index.html 里引入 public/ 里的 JS

对于 public/libs/ 目录下的文件，可以在 index.html 里手动引入：

html复制编辑<script src="/libs/adminlte.min.js"></script>

⚠ 注意：public/ 目录下的文件不会被 Vite 处理，路径必须用 / 开头。

总结

• 全局 CSS/JS 放在 src/assets/
• 组件相关 CSS/JS 直接写在 src/components/ 里
• 第三方库（npm 无法安装的） 放在 public/libs/
• 在 main.js 里引入 CSS/JS，以便 Vite 处理
• public/ 目录下的文件用 <script> 或 <link> 手动引入

这样做可以让 Vite 充分优化资源加载，同时保持代码结构清晰！ 🚀