配置 Node.js 和 npm 环境

Node.js 和 npm 是开发 uni-app 项目的核心工具链之一。正确配置环境能大幅提升开发效率，避免因版本问题导致的兼容性错误。

安装 Node.js

Node.js 是运行 JavaScript 的服务器环境，也是 npm 的运行时依赖。建议通过以下方式安装：

1. 官方安装包（推荐初学者）：

   • 访问 Node.js 官网 下载 LTS 版本
   • Windows 用户直接运行 .msi 安装包
   • macOS 用户使用 .pkg 安装程序

2. 版本管理工具（适合多项目协作）：

   # 使用 nvm（Windows 用户用 nvm-windows）
   nvm install 16.14.0  # 安装指定版本
   nvm use 16.14.0      # 切换版本
   

安装完成后验证：

node -v  # 应输出类似 v16.14.0
npm -v   # 对应版本如 8.3.1

配置 npm 镜像源

国内用户建议更换淘宝镜像加速依赖下载：

# 永久设置镜像源
npm config set registry https://registry.npmmirror.com

# 临时使用镜像安装
npm install --registry=https://registry.npmmirror.com

# 验证配置
npm config get registry

可选工具 nrm 快速切换源：

npm install -g nrm
nrm ls           # 列出可用源
nrm use taobao   # 切换淘宝源

全局依赖安装

uni-app 开发需要以下全局工具：

# Vue CLI（构建工具）
npm install -g @vue/cli

# HBuilderX 命令行工具（可选）
npm install -g @dcloudio/uvm

# 验证安装
vue --version
uvm --version

项目级 npm 配置

创建 uni-app 项目时需注意：

1. 通过官方模板创建：

vue create -p dcloudio/uni-preset-vue my-project

2. 关键 package.json 配置示例：

{
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "dev:h5": "uni -p h5",
    "build:h5": "uni build -p h5"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^3.0.0",
    "sass": "^1.26.10"
  },
  "devDependencies": {
    "@dcloudio/uni-helper-json": "^1.0.5"
  }
}

常见环境问题解决

权限错误（Mac/Linux）

# 修正 npm 全局安装权限
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

版本冲突处理

# 清除缓存后重新安装
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

特定 Node 版本需求

通过 engines 字段约束版本：

{
  "engines": {
    "node": ">=14.0.0 <17.0.0",
    "npm": ">=6.0.0"
  }
}

多环境管理技巧

1. 使用 .npmrc 文件配置项目级设置：

   registry=https://registry.npmmirror.com
   sass_binary_site=https://npmmirror.com/mirrors/node-sass/
   

2. 通过 cross-env 处理跨平台环境变量：

   npm install cross-env --save-dev
   

   "scripts": {
     "build": "cross-env NODE_ENV=production uni build"
   }
   

自动化部署配置

CI/CD 环境示例（GitHub Actions）：

name: Build Uni-app
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build:h5

性能优化建议

1. 使用 npm ci 替代 npm install 在持续集成中：

   npm ci --production  # 仅安装生产依赖
   

2. 按需安装依赖：

   # 仅安装项目运行必需依赖
   npm install --omit=dev
   

3. 使用 pnpm 替代 npm：

   npm install -g pnpm
   pnpm install  # 速度更快且节省磁盘空间