uniapp打包成h5自定义程序目录结构,css单独一个文件夹,js单独一个文件夹,图片单独一个文件夹,引入的第三方库单独一个文件夹
时间: 2024-09-10 22:11:22 浏览: 55
UniApp 打包成 H5 自定义程序时,通常推荐按照以下目录结构来组织:
1. **root** (根目录):
- `dist` (发布目录): 这是最终打包后的所有资源存放的地方。
- `index.html`: 主入口 HTML 文件,包含了引用其他资源的链接。
- `uni-app.js`: UniApp 的运行脚本。
- `manifest.json`: 描述应用元数据的 JSON 文件。
2. **assets** (静态资源文件夹):
- `css` (样式文件夹): 放置项目中所有的 CSS 文件。
- `img` (图片文件夹): 存放项目的图片资源。
- `lib` (第三方库文件夹): 放置从 NPM 或其他源引入的 JavaScript 库和依赖。
3. **scripts** (JavaScript 文件夹) (如果你有按模块划分):
- 可能包含项目自身的 JavaScript 文件、Vue 组件、API 模块等。
4. **components**: 如果项目使用 Vue 体系,这里可以包含 Vue 组件文件夹。
当引入第三方库时,可以在`lib`文件夹下创建对应库的子文件夹,并将所需的 JS 文件复制过去。在`index.html`中通过 `<script>` 标签引用这些外部库,例如:
```html
<script src="lib/axios.min.js"></script>
```
这样的结构有助于保持代码整洁,方便管理和维护。记得在构建时配置好路径映射,以便将相对路径转换为实际的输出路径。同时,确保在`manifest.json`中正确配置文件路径,以便打包工具能找到它们。
阅读全文