第 6 课：Vue 3 工程化与项目部署实战 —— 从本地开发到线上发布

在前 5 课中，我们已经完成了前后端交互（Axios）和企业级界面搭建（Element Plus），得到了一个功能完整、界面美观的待办应用。但此时应用仍停留在本地开发环境，无法被他人访问。本节课将聚焦工程化优化和项目部署两大核心环节，解决 “打包体积过大”“环境区分混乱”“线上部署复杂” 等问题，带你完成从 “本地开发” 到 “线上发布” 的全流程，让你的应用能被全球用户访问。

一、课前准备：部署前的基础准备（10 分钟搞定）

本节课需要提前准备 3 类核心工具 / 账号，避免部署时手忙脚乱，新手直接照做即可：

1. 确认项目环境：确保当前项目能正常启动（npm run dev）、无报错，且已完成第 5 课的前后端交互功能；
2. 部署平台账号：注册 1 个免费部署平台账号（推荐 Netlify 或 GitHub Pages，新手优先 Netlify，操作更简单，无需复杂配置）；
3. 代码管理工具（可选但推荐）：注册 GitHub 账号，创建仓库，将本地项目提交到 GitHub（便于后续部署时直接拉取代码，也能备份项目）。

课前知识铺垫（通俗理解核心概念）

• 工程化：简单说就是 “规范化、高效化开发项目的一套流程和工具”—— 比如区分开发 / 测试 / 生产环境（避免线上用测试接口）、优化打包体积（让应用加载更快）、统一代码规范（避免多人开发混乱），这些都是企业开发的必备要求；
• 打包：将本地开发的 Vue 代码、依赖包等，压缩合并成浏览器能直接识别的静态文件（HTML/CSS/JS），打包后的文件体积更小、加载更快；
• 部署：把打包后的静态文件放到服务器上，让全球用户通过域名访问你的应用（比如部署后得到一个类似xxx.netlify.app的在线地址）。

二、核心实操一：工程化优化 —— 让项目更规范、加载更快

1. 步骤 1：配置环境变量（区分开发 / 测试 / 生产）

实际开发中，我们需要区分 3 种环境：

• 开发环境（dev）：本地开发用，接口用测试地址；
• 生产环境（prod）：线上部署用，接口用正式地址；
• 环境变量：存储不同环境的配置（比如接口基础地址），避免手动修改代码切换环境。

实操：创建环境变量文件

在项目根目录下（my-first-vue-project），新建 3 个环境变量文件，分别对应不同环境：

1. .env.development（开发环境，本地用）：

   env

   # 开发环境变量，命名必须以VITE_开头（Vite要求） VITE_ENV = 'development' VITE_BASE_API = 'https://jsonplaceholder.typicode.com' # 测试接口地址

2. .env.production（生产环境，线上用）：

   env

   # 生产环境变量 VITE_ENV = 'production' VITE_BASE_API = 'https://jsonplaceholder.typicode.com' # 若有正式接口，替换为正式地址

3. .env.test（测试环境，可选，用于测试服务器）：

   env

   # 测试环境变量 VITE_ENV = 'test' VITE_BASE_API = 'https://test-jsonplaceholder.typicode.com' # 测试服务器接口地址

实操：在项目中使用环境变量

修改src/utils/axios.js，用环境变量替换固定的baseURL：

javascript

运行

// src/utils/axios.js import axios from 'axios' import { ElMessage } from 'element-plus' const service = axios.create({ // 读取环境变量中的接口基础地址，不同环境自动切换 baseURL: import.meta.env.VITE_BASE_API, timeout: 5000 }) // 其他代码不变...

验证：环境变量是否生效

启动开发环境（npm run dev），在axios.js中添加console.log(import.meta.env.VITE_BASE_API)，打开浏览器控制台，能看到打印出https://jsonplaceholder.typicode.com，说明配置成功。

2. 步骤 2：Vite 打包优化 —— 缩小体积、提升加载速度

Vite 是 Vue 3 的默认构建工具，自带基础优化，我们只需补充简单配置，进一步优化打包效果：

实操 1：配置 Vite 打包选项（vite.config.js）

项目根目录下的vite.config.js是 Vite 的核心配置文件，修改内容如下：

javascript

运行

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 1. 配置路径别名（简化导入路径，比如@代表src） resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, // 2. 打包优化配置 build: { outDir: 'dist', // 打包输出目录（默认就是dist，可自定义） assetsDir: 'assets', // 静态资源（图片、CSS、JS）存放目录 minify: 'esbuild', // 用esbuild压缩代码（更快、体积更小） rollupOptions: { // 3. Tree Shaking：移除未使用的代码 output: { manualChunks: { // 拆分依赖包（比如把Vue、Element Plus等第三方库单独打包，便于浏览器缓存） vue: ['vue', 'vue-router', 'pinia'], elementPlus: ['element-plus', '@element-plus/icons-vue'], axios: ['axios'] } } } }, // 3. 开发服务器配置（可选，解决跨域问题） server: { proxy: { // 若开发环境接口跨域，可配置代理 '/api': { target: import.meta.env.VITE_BASE_API, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

实操 2：图片优化（自动压缩 + 按需加载）

Vite 默认支持图片优化，只需在使用图片时遵循规范即可：

• 小图片（默认＜4KB）：自动转为 Base64 编码，嵌入 HTML 中，减少网络请求；
• 大图片：自动复制到打包后的assets目录，并用哈希命名（避免缓存问题）；
• 实操：在项目中引入图片（比如在Home.vue中添加 logo），打包后会自动优化：

  vue

  <template> <div class="home"> <!-- 引入图片，Vite自动优化 --> <img src="@/assets/logo.png" alt="Vue Logo" class="logo"> <!-- 其他代码不变... --> </div> </template>

实操 3：执行打包命令，查看优化效果

打开终端，输入打包命令：

bash

运行

npm run build

打包完成后，项目根目录会生成dist文件夹（打包后的静态文件）。此时可通过dist文件夹的大小，对比优化前后的效果（优化后体积通常会减少 30%-50%）。

3. 步骤 3：代码规范（ESLint+Prettier）—— 统一编码风格

企业开发中，代码规范是必备要求，避免因编码风格不统一导致的维护困难。我们用ESLint（代码语法检查）+Prettier（代码格式化）实现自动规范：

1. 安装依赖

终端输入以下指令，安装所需依赖：

bash

运行

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D

2. 配置 ESLint（.eslintrc.js）

项目根目录新建.eslintrc.js文件，添加配置：

javascript

运行

module.exports = { root: true, env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended' // 整合Prettier ], parserOptions: { ecmaVersion: 'latest', parser: '@babel/eslint-parser', sourceType: 'module' }, plugins: ['vue'], rules: { // 自定义规则（新手可默认，后续根据需求调整） 'vue/no-unused-components': 'warn', // 未使用的组件警告 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止console 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' // 生产环境禁止debugger } }

3. 配置 Prettier（.prettierrc.js）

项目根目录新建.prettierrc.js文件，添加配置：

javascript

运行

module.exports = { printWidth: 120, // 一行最大字符数 tabWidth: 2, // 缩进2个空格 useTabs: false, // 不用tab缩进 singleQuote: true, // 单引号 semi: false, // 不加分号 trailingComma: 'none', // 数组/对象最后一个元素不加分号 bracketSpacing: true, // 对象前后加空格（{ a: 1 }） vueIndentScriptAndStyle: true // Vue文件中script和style缩进 }

4. 添加规范检查脚本

修改package.json的scripts部分，添加检查和修复命令：

json

"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", // 本地预览打包后的文件 "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx", // 检查代码规范 "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix" // 自动修复规范问题 }

验证：代码规范是否生效

终端输入npm run lint，若代码有不规范的地方（比如用了双引号、加了多余分号），会显示警告；输入npm run lint:fix，会自动修复大部分规范问题，新手只需专注开发，无需手动调整格式。

二、核心实操二：项目部署实战 ——3 种主流部署方式（新手优先第 1 种）

1. 方式 1：Netlify 部署（最简单，新手首选）

Netlify 是免费的静态网站部署平台，支持直接拉取 GitHub 代码，自动打包部署，步骤如下：

步骤 1：将本地项目提交到 GitHub

（若已提交，可跳过）

1. GitHub 新建仓库（比如命名vue-todo-app）；
2. 终端进入本地项目目录，执行以下指令提交代码：

   bash

   运行

   # 初始化git仓库 git init # 添加所有文件 git add . # 提交备注 git commit -m "完成待办应用开发，准备部署" # 关联GitHub仓库（替换为你的仓库地址） git remote add origin https://github.com/你的用户名/vue-todo-app.git # 推送到GitHub git push -u origin main

步骤 2：Netlify 关联 GitHub 仓库，自动部署

1. 登录 Netlify，点击右上角 “New site from Git”；
2. 选择 “GitHub”，授权后搜索你的仓库（vue-todo-app），点击选中；
3. 配置部署参数（默认即可，新手无需修改）：
   • Build command：vite build（打包命令）；
   • Publish directory：dist（打包输出目录）；
4. 点击 “Deploy site”，Netlify 会自动拉取代码、执行打包、部署上线；
5. 部署完成后，Netlify 会生成一个随机域名（比如xxx.netlify.app），点击域名即可访问你的线上应用！

避坑提示：

• 若部署后页面空白，检查vite.config.js是否配置base: './'（解决路由路径问题）：

  javascript

  运行

  // vite.config.js 中添加base配置 export default defineConfig({ base: './', // 部署时的基础路径 // 其他配置不变... })

• 修改代码后，只需将代码推送到 GitHub，Netlify 会自动重新部署，无需手动操作。

2. 方式 2：GitHub Pages 部署（免费，适合已用 GitHub 管理代码）

GitHub Pages 也支持静态网站部署，步骤如下：

1. 安装部署插件（简化部署步骤）：

   bash

   运行

   npm install gh-pages -D

2. 修改package.json，添加部署脚本：

   json

   "scripts": { // 其他脚本不变... "deploy": "vite build && gh-pages -d dist" }

3. 修改vite.config.js，配置基础路径（必须和 GitHub 仓库名一致）：

   javascript

   运行

   export default defineConfig({ base: '/vue-todo-app/', // 替换为你的仓库名 // 其他配置不变... })

4. 终端执行部署命令：

   bash

   运行

   npm run deploy

5. 部署完成后，访问地址：https://你的用户名.github.io/vue-todo-app/，即可看到线上应用。

3. 方式 3：本地打包后手动上传（适合无 GitHub 账号的新手）

若没有 GitHub 账号，可手动上传打包后的dist文件到免费服务器（比如阿云轻量应用服务器、Vercel 等），步骤如下：

1. 终端执行npm run build，生成dist文件夹；
2. 登录部署平台（比如 Vercel），点击 “上传文件”，选择dist文件夹中的所有文件；
3. 上传完成后，平台会生成在线域名，访问即可。

三、综合实战：完成应用线上发布全流程

1. 实战目标

1. 工程化优化：配置环境变量、优化打包体积、统一代码规范；
2. 线上部署：通过 Netlify 部署应用，生成可公开访问的域名；
3. 验证功能：访问线上域名，测试所有功能（新增 / 删除 / 修改待办）是否正常。

2. 完整流程测试

1. 本地执行npm run lint:fix，修复代码规范问题；
2. 执行npm run build，验证打包是否成功；
3. 将代码推送到 GitHub，触发 Netlify 自动部署；
4. 部署完成后，访问 Netlify 生成的域名，测试：
   • 页面是否正常加载，无空白；
   • 新增待办：输入内容点击添加，是否成功，有无提示；
   • 删除 / 修改待办：操作后是否同步生效；
   • 响应式：缩小浏览器窗口，界面是否适配手机尺寸。

3. 新手优化建议

1. 自定义域名：Netlify 和 GitHub Pages 都支持绑定自己的域名（比如todo.你的域名.com），适合个人展示；
2. 部署环境区分：在 Netlify 中配置环境变量（对应VITE_BASE_API），实现测试 / 生产环境的切换；
3. 添加访问统计：集成百度统计或 Google Analytics，查看应用的访问量、用户行为。

四、本节课总结与下节课预告

1. 本节课核心收获

• 工程化优化：掌握环境变量配置、Vite 打包优化、ESLint+Prettier 代码规范，让项目符合企业开发标准；
• 项目部署：掌握 3 种主流免费部署方式（Netlify/GitHub Pages / 手动上传），完成应用线上发布；
• 完整流程：打通 “开发→优化→打包→部署→上线” 的全链路，理解前端项目从本地到线上的完整流程。

2. 课后作业（必做）

1. 独立完成工程化优化（环境变量、打包配置、代码规范）；
2. 选择一种部署方式（推荐 Netlify），将你的待办应用部署到线上，并获取线上域名；
3. 测试线上应用的所有功能，修复部署中遇到的问题（比如页面空白、路由跳转失败）；
4. 整理部署踩坑笔记，比如 “路径配置错误导致页面空白”“环境变量未生效” 等。

3. 下节课预告

下节课我们将学习 “Vue 3 应用性能优化与进阶实战”，解决 “应用加载慢”“运行卡顿” 等问题 —— 比如路由懒加载、组件缓存、大型列表优化（虚拟列表）、性能监控工具使用，让你的应用不仅能 “上线”，还能 “跑得快、体验好”，进一步提升你的前端技术竞争力！