Vue 项目打包与部署指南

一、本地项目打包

1. 安装依赖

确保项目依赖完整：

npm install # 或 yarn install 

2. 环境配置

在项目根目录创建环境文件，区分开发和生产环境：

.env.production（生产环境）

NODE_ENV=production VUE_APP_API_BASE=https://api.your-domain.com

.env.development（开发环境）

NODE_ENV=development VUE_APP_API_BASE=http://localhost:3000/api

3. 执行打包命令

使用 Vue CLI 进行生产构建：

npm run build # 或 yarn build

• 输出目录：默认生成 dist/ 文件夹，包含：
  • index.html（入口文件）
  • css/（样式文件）
  • js/（脚本文件）
  • fonts/（字体文件）
  • img/（图片资源）

---

二、打包优化

1. 分析构建体积

使用 webpack-bundle-analyzer 查看打包文件体积：

npm install --save-dev webpack-bundle-analyzer

在 vue.config.js 中配置：

module.exports = { chainWebpack: (config) => { config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin); } }; 

运行分析：

npm run build -- --report 

2. 优化手段

• 代码分割：动态导入组件（() => import('./Component.vue')）。
• 压缩资源：启用 gzip/brotli 压缩。

CDN 引入：将 、 等库通过 CDN 加载。