typescript和vue和node项目的构建打包部署

TypeScript + Vue + Node.js 项目构建与部署流程

项目结构规划

典型的全栈项目目录结构分为前端（Vue）和后端（Node.js）两部分：

project-root/
├── client/          # Vue前端项目
├── server/          # Node.js后端项目
├── shared/          # 共享代码（如TypeScript类型定义）
└── package.json     # 根级别脚本管理

前端（Vue + TypeScript）构建

安装必要依赖：

npm install vue@next @vitejs/plugin-vue typescript @vue/compiler-sfc -D

配置vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],build: {outDir: '../dist/client',emptyOutDir: true}
})

生产环境打包命令：

cd client && npm run build

后端（Node.js + TypeScript）构建

安装开发依赖：

npm install ts-node typescript @types/node -D

配置tsconfig.json：

{"compilerOptions": {"target": "ES2020","module": "CommonJS","outDir": "./dist","rootDir": "./src"}
}

使用esbuild快速打包：

npm install esbuild -D

添加构建脚本：

"scripts": {"build": "esbuild src/index.ts --bundle --platform=node --outfile=dist/server.js"
}

共享代码处理

配置TypeScript路径映射：

// tsconfig.json
{"paths": {"@shared/*": ["../shared/*"]}
}

生产环境部署

Docker部署方案：

# 前端服务
FROM nginx:alpine
COPY dist/client /usr/share/nginx/html
EXPOSE 80# 后端服务
FROM node:16-alpine
WORKDIR /app
COPY dist/server.js .
COPY package.json .
RUN npm install --production
EXPOSE 3000
CMD ["node", "server.js"]

PM2进程管理：

npm install pm2 -g
pm2 start dist/server.js --name "api-server"

持续集成配置

GitHub Actions示例：

name: CI/CD
on: [push]
jobs:deploy:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- run: npm install- run: npm run build --if-present- uses: appleboy/ssh-action@masterwith:host: ${{ secrets.SSH_HOST }}username: ${{ secrets.SSH_USER }}script: |cd /var/www/projectgit pullnpm install --productionpm2 restart all

环境变量管理

使用dotenv处理敏感配置：

import dotenv from 'dotenv'
dotenv.config()console.log(process.env.API_KEY)

前端环境变量通过Vite注入：

// vite.config.ts
export default defineConfig({define: {'process.env': process.env}
})