uniapp package.json配置

<think>我们正在讨论的是uni-app项目中package.json文件的配置。根据用户提供的引用和问题，我们需要整理关于uni-app在package.json中配置的相关信息。 用户提供的引用内容主要涉及： 1. 多环境配置：在package.json中添加uni-app的scripts，用于区分不同环境（如开发、测试、生产）[^1]。 2. 原生插件开发：在package.json中配置"_dp_nativeplugin"节点，特别是iOS平台的配置[^2]。 3. 环境变量区分：在打包发布时，如何通过package.json和mainfest.json区分环境变量[^3]。 4. 开发环境配置：通过process.env获取环境变量，根据环境设置不同的请求地址等[^4]。 用户的问题：查找关于uni-app在package.json中的配置信息，即uniapp package.json配置指南。 因此，我们需要围绕uni-app项目中package.json文件的常见配置进行说明，包括环境配置、脚本配置、原生插件配置等。 下面开始组织回答：</think>### UniApp `package.json` 配置指南 UniApp 项目中 `package.json` 是核心配置文件，用于管理项目依赖、环境变量、多端构建及脚本命令。以下是关键配置项详解： --- #### 1. **多环境配置（开发/测试/生产）** 在 `uni-app.scripts` 中定义不同环境的构建参数，通过 `env` 指定环境变量： ```json {5-10,12-15} { "uni-app": { "scripts": { "dev": { "env": { "NODE_ENV": "development", "VUE_APP_API_BASE": "https://dev.api.com" } }, "prod": { "env": { "NODE_ENV": "production", "VUE_APP_API_BASE": "https://prod.api.com" } } } } } ``` - **使用方式**： ```bash npm run dev # 加载 development 环境变量 npm run prod # 加载 production 环境变量 ``` - **代码中获取变量**： ```javascript const baseUrl = process.env.VUE_APP_API_BASE; ``` 通过 `process.env` 访问自定义环境变量[^1][^4]。 --- #### 2. **多端平台适配（如钉钉小程序）** 在 `scripts` 中为不同平台配置独立参数： ```json {5-12} { "uni-app": { "scripts": { "mp-dingtalk": { "title": "钉钉小程序", "env": { "UNI_PLATFORM": "mp-alipay", // 使用支付宝小程序引擎适配钉钉 "NODE_ENV": "production" }, "define": { "MP_DINGTALK": true // 注入全局标识 } } } } } ``` - **全局标识使用**： ```javascript if (typeof MP_DINGTALK !== 'undefined') { console.log("当前是钉钉小程序环境"); } ``` 此配置允许 UniApp 编译时自动注入平台标识[^1]。 --- #### 3. **原生插件配置（iOS/Android）** 通过 `_dp_nativeplugin` 节点配置原生插件： ```json {3-9} { "_dp_nativeplugin": { "ios": { "plugins": [ { "name": "CameraPlugin", "path": "native/ios/Camera" } ] }, "android": { "permissions": ["CAMERA"] } } } ``` - **作用**：声明原生模块路径和所需权限，确保打包时正确集成[^2]。 --- #### 4. **Git 钩子与代码检查** 利用 `gitHooks` 和 `lint-staged` 实现提交前自动校验： ```json {3-12} { "gitHooks": { "pre-commit": "lint-staged" // 提交前触发 }, "lint-staged": { "*.{js,vue,ts}": [ "eslint --fix", // 自动修复可修复的错误 "git add" // 将修复后的文件重新加入暂存区 ] } } ``` - **效果**：仅对暂存区文件执行 ESLint，避免全量检查[^1]。 --- #### 5. **浏览器兼容性（`browserslist`）** 控制代码转译范围，确保多端兼容性： ```json { "browserslist": [ "Android >= 4.4", // 支持 Android 4.4 及以上 "ios >= 9" // 支持 iOS 9 及以上 ] } ``` 此配置影响 Babel 和 Autoprefixer 的编译行为，例如： - `Android >= 4.4`：转译 ES6 语法，添加 CSS 前缀 `-webkit-`。 --- ### 最佳实践建议 1. **环境分离**： - 为开发、测试、生产环境定义独立的 `NODE_ENV` 和接口地址[^1][^4]。 2. **平台条件编译**： - 使用 `#ifdef MP-DINGTALK` 在代码中编写平台专有逻辑。 3. **自动化校验**： - 通过 `lint-staged` 减少代码检查耗时，确保团队代码风格统一[^1]。 > 参考文档：[UniApp 官方配置文档](https://uniapp.dcloud.io/collocation/package)