前端命令部署

前端部署常用命令整理

以下是前端项目中常见的 npm 命令，按开发、构建、部署等阶段分类整理，帮助你快速掌握完整流程。

📦 一、项目初始化与依赖管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 初始化项目（生成 package.json）
npm init -y

# 安装所有依赖（根据 package.json）
npm install

# 安装指定依赖
npm install <package-name>

# 安装开发依赖
npm install <package-name> --save-dev

# 安装指定版本
npm install <package-name>@<version>

# 全局安装包
npm install -g <package-name>

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

# 检查依赖更新
npm outdated

# 更新依赖
npm update

🛠 二、开发阶段命令

1
2
3
4
5
6
7
8
9
10
11
# 启动本地开发服务器（热更新）
npm run dev

# 启动开发服务器（指定端口）
npm run dev -- --port 3000

# 启动开发服务器（开放外部访问）
npm run dev -- --host

# 启动开发服务器（HTTPS）
npm run dev -- --https

🏗 三、构建与打包命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 生产环境构建
npm run build

# 开发环境构建
npm run build:dev

# 测试环境构建
npm run build:test

# 预览构建结果（本地）
npm run preview

# 分析打包体积
npm run build -- --report

🚀 四、部署相关命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 构建并部署
npm run deploy

# 构建后上传到服务器
npm run build && scp -r dist/ user@server:/var/www/

# 使用 PM2 部署 Node 服务
npm run build
pm2 start npm --name "my-app" -- run start

# Docker 构建与部署
docker build -t my-app .
docker run -p 80:80 my-app

# 部署到 Vercel
vercel deploy

# 部署到 Netlify
netlify deploy

🧪 五、测试与代码质量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 运行测试
npm run test

# 运行测试（监听模式）
npm run test:watch

# 生成测试覆盖率报告
npm run test:coverage

# 代码格式化
npm run lint
npm run lint:fix

# 代码格式化（Prettier）
npm run format

🧹 六、清理与维护

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 清理构建文件
npm run clean

# 卸载依赖
npm uninstall <package-name>

# 检查安全漏洞
npm audit

# 自动修复安全漏洞
npm audit fix

# 查看已安装包
npm list

# 查看全局安装包
npm list -g --depth 0

📄 七、package.json 脚本示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode testing",
    "build:prod": "vite build --mode production",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "test": "vitest",
    "test:coverage": "vitest --coverage",
    "deploy": "npm run build && gh-pages -d dist",
    "clean": "rm -rf dist node_modules/.cache"
  }
}

⚙️ 八、常用框架命令对比

框架 开发命令 构建命令
Vue CLI npm run serve npm run build
Vite npm run dev npm run build
Create React App npm start npm run build
Next.js npm run dev npm run build
Nuxt.js npm run dev npm run generate

💡 九、实用技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 使用 npx 运行局部命令
npx vite
npx create-react-app my-app

# 查看 npm 配置
npm config list

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 查看项目依赖树
npm ls

# 并行运行多个命令（Linux/Mac）
npm run build && npm run deploy

# 使用 concurrently 并行运行
npm install -g concurrently
concurrently "npm run dev" "npm run server"

⚠️ 十、常见问题解决

1
2
3
4
5
6
7
8
9
10
11
12
13
# 权限问题（Mac/Linux）
sudo chown -R $(whoami) ~/.npm

# 删除 node_modules 重装
rm -rf node_modules package-lock.json
npm install

# 端口被占用
lsof -i :3000
kill -9 <PID>

# 清理 npm 缓存
npm cache clean --force

掌握这些命令，你可以更高效地完成前端项目的开发、构建与部署流程。根据具体项目需求选择合适的命令组合，将大幅提升开发效率与部署稳定性。