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

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

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

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

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

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

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

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

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

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

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

实操：创建环境变量文件

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

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

env

复制代码

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

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

env

复制代码

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

.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

（若已提交，可跳过）

GitHub 新建仓库（比如命名vue-todo-app）；

终端进入本地项目目录，执行以下指令提交代码： 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 仓库，自动部署

登录 Netlify，点击右上角 "New site from Git"；
选择 "GitHub"，授权后搜索你的仓库（vue-todo-app），点击选中；
配置部署参数（默认即可，新手无需修改）：
- Build command：vite build（打包命令）；
- Publish directory：dist（打包输出目录）；
点击 "Deploy site"，Netlify 会自动拉取代码、执行打包、部署上线；
部署完成后，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 也支持静态网站部署，步骤如下：

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

运行
复制代码
```
npm install gh-pages -D
```

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

json

复制代码

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

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

javascript

运行

复制代码

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

终端执行部署命令： bash

运行
复制代码
```
npm run deploy
```
部署完成后，访问地址：https://你的用户名.github.io/vue-todo-app/，即可看到线上应用。

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

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

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

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

1. 实战目标

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

2. 完整流程测试

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

3. 新手优化建议

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

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

1. 本节课核心收获

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

2. 课后作业（必做）

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

3. 下节课预告

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

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

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

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

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

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

实操：创建环境变量文件

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

验证：环境变量是否生效

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

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

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

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

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

1. 安装依赖

2. 配置 ESLint（.eslintrc.js）

3. 配置 Prettier（.prettierrc.js）

4. 添加规范检查脚本

验证：代码规范是否生效

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

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

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

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

避坑提示：

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

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

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

1. 实战目标

2. 完整流程测试

3. 新手优化建议

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

1. 本节课核心收获

2. 课后作业（必做）

3. 下节课预告

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

2. 配置 ESLint（`.eslintrc.js`）

3. 配置 Prettier（`.prettierrc.js`）