npm run build命令详解

🚀 构建过程详解

1. 构建命令分析

根据 package.json 中的配置：

复制代码

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

2. Vite构建配置

查看 vite.config.js 的构建相关配置：

复制代码

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    outDir: 'dist',      // 输出目录
    assetsDir: 'assets', // 静态资源目录
  },
})

📋 执行构建的步骤

请在项目根目录执行以下命令：

复制代码

cd f:\WWW\assets-agent-web
npm run build

🎯 构建过程会发生什么？

第1步：代码检查和优化

TypeScript检查 - 确保类型安全
ESLint检查 - 代码规范检查
依赖分析 - 分析模块依赖关系

第2步：资源处理

Vue组件编译 - 将 .vue 文件编译成JavaScript
CSS处理 - 提取和压缩CSS
TypeScript转译 - 转换为JavaScript

第3步：代码优化

Tree Shaking - 移除未使用的代码
代码压缩 - 减小文件体积
分包策略 - 按需加载优化

第4步：资源输出

构建完成后会在项目根目录生成 dist/ 文件夹：

复制代码

dist/
├── index.html              # 入口HTML文件
├── assets/
│   ├── index-xxx.js        # 主JavaScript文件
│   ├── index-xxx.css       # 主CSS文件
│   ├── vendor-xxx.js       # 第三方库
│   └── [其他静态资源]

dist/

├── index.html # 入口HTML文件

├── assets/

│ ├── index-xxx.js # 主JavaScript文件

│ ├── index-xxx.css # 主CSS文件

│ ├── vendor-xxx.js # 第三方库

│ └── $其他静态资源$

📊 构建结果预览

构建完成后，你可以：

1. 本地预览

复制代码

npm run preview

这会启动一个本地服务器预览构建结果。

2. 查看构建分析

复制代码

npm run build -- --report

查看详细的构建报告。

⚠️ 构建常见问题

1. 内存不足

复制代码

# 增加Node.js内存限制
set NODE_OPTIONS=--max-old-space-size=4096
npm run build

2. 构建失败检查

检查代码语法错误
确认所有依赖已安装： npm install
查看TypeScript类型错误： npm run type-check

3. 路径问题

确保 vite.config.js 中的路径配置正确。

🎉 构建成功后的部署

构建完成后，你可以将 dist/ 目录中的文件部署到：

Nginx服务器 - 使用提供的nginx配置模板
静态文件托管 - GitHub Pages、Netlify等
CDN - 阿里云、腾讯云等

📝 总结

要构建这个项目，请在命令行执行：

复制代码

cd f:\WWW\assets-agent-web
npm run build

构建过程会：

编译所有Vue组件和TypeScript代码
优化和压缩资源
生成可部署的静态文件到 dist/ 目录
准备用于Nginx部署的文件

构建成功后，你可以使用 npm run preview 本地预览，或者将 dist/ 目录部署到Nginx服务器。