Stage three:VUE工程化与实战工具

DAY 11

1.Vite

打开package.json，看看 scripts 部分：每次敲的这 3 个命令，背后的主角就是Vite。

javascript 复制代码

{
  "scripts": {
    "dev": "vite",           // 启动开发服务器
    "build": "vite build",   // 打包项目
    "preview": "vite preview" // 预览打包后的结果
  }
}

问题	答案
Vite 是啥？	前端构建工具
用来干嘛？	启动项目（`npm run dev`）、打包项目（`npm run build`）
为啥用它？	因为快（启动快、刷新快），配置简单
和 Vue 啥关系？	Vite 是工具，Vue 是你写的代码（类比：vite是厨房，vue是菜谱）
环境变量是啥？	Vite 提供的一个功能，让你在不同环境下用不同配置

2.Vite 配置

①Vite 环境变量配置

开发环境为"开发方便"而生（日志全开、Mock 开启、验证码关闭），生产环境为"安全稳定"而设（关闭调试、压缩代码、拦截错误）。

Vite 环境变量用途汇总表（具体干什么）

用途分类	具体说明	配置示例	使用场景
接口地址配置	不同环境使用不同的后端 API 地址	`VITE_API_BASE_URL = http://localhost:3000/api`（开发） `VITE_API_BASE_URL = https://api.company.com`（生产）	前后开发端分离项目，调本地后端，生产调用线上后端
应用标题/名称	不同环境显示不同的应用名称	`VITE_APP_TITLE = 管理系统-开发版`（开发） `VITE_APP_TITLE = XX后台管理系统`（生产）	浏览器标签页标题、页面头部显示
功能开关 Mock	控制某些功能在特定环境启用/禁用	`VITE_ENABLE_MOCK = true`（开发开启 Mock） `VITE_ENABLE_MOCK = false`（生产关闭 Mock）	开发环境使用模拟数据，生产环境调用真实接口
日志调试开关	控制日志输出级别	`VITE_LOG_LEVEL = debug`（开发输出所有日志） `VITE_LOG_LEVEL = error`（生产只输出错误）	开发时便于调试，生产时减少控制台输出
第三方服务密钥	不同环境使用不同的第三方服务配置	`VITE_MAP_KEY = test_xxx`（开发测试 Key） `VITE_MAP_KEY = prod_xxx`（生产正式 Key）	地图服务、统计工具、支付等第三方 SDK
部署路径配置	配置应用部署的子路径	`VITE_PUBLIC_PATH = /`（根路径部署） `VITE_PUBLIC_PATH = /admin/`（子路径部署）	应用部署在域名根目录或子目录下
请求超时时间	不同环境设置不同的超时时间	`VITE_REQUEST_TIMEOUT = 30000`（开发长一些） `VITE_REQUEST_TIMEOUT = 10000`（生产短一些）	开发环境网络慢，适当延长超时时间
CDN 资源地址	不同环境使用不同的静态资源 CDN	`VITE_CDN_URL = https://cdn-test.xxx.com`（测试 CDN） `VITE_CDN_URL = https://cdn.xxx.com`（生产 CDN）	静态资源（图片、字体等）走 CDN 加速
环境标识	标识当前运行环境，用于条件判断	`VITE_ENV = development` / `production`	代码中做环境判断，执行不同逻辑
代理配置	开发环境代理转发配置	`VITE_PROXY_TARGET = http://localhost:8080`	开发环境解决跨域问题
打包优化开关	控制打包时的优化选项	`VITE_REMOVE_CONSOLE = true`（生产移除 console）	生产环境移除调试代码，减小体积
多语言/国际化	不同环境设置默认语言	`VITE_DEFAULT_LANG = zh-CN`	项目国际化配置

Vite 环境变量存储文件汇总表（上面那些用途分别写在哪个文件里）

文件名	用途	什么时候用	提交 Git？
`⭐` `.env`	通用默认配置（所有环境都生效）	所有环境的基础配置	✅ 提交
`⭐ .env.development`	开发环境专用配置	`npm run dev` 时自动加载	✅ 提交
`⭐ .env.production`	生产环境专用配置	`npm run build` 时自动加载	✅ 提交
`.env.staging`	预发布/测试环境专用配置	`npm run build --mode staging` 时加载	✅ 提交
`⭐` `.env.local`	本地个人私密配置（覆盖所有环境）	任何时候都会加载，覆盖同名配置	❌ 绝不提交
`.env.development.local`	开发环境的个人私密覆盖	开发环境下加载，覆盖 `.env.development`	❌ 绝不提交
`.env.production.local`	生产环境的个人私密覆盖	生产环境下加载，覆盖 `.env.production`	❌ 绝不提交

从上到下，优先级变高，优先级高的覆盖优先级低的）

（.env.development、.env.production），区分开发环境和生产环境的配置差异；

掌握 Vite 打包优化方法（配置打包输出目录、压缩代码、CDN 引入第三方库），减少打包体积和加载时间；
实操：配置项目的开发和生产环境变量（如接口基础地址）；优化项目打包配置，实现打包体积压缩；
拓展：了解 Vite 插件的使用（如 vite-plugin-compression 实现 gzip ）。压缩

②Vite打包优化

Vite 打包优化汇总表

优化一：代码分割（Code Splitting）= 菜品分装

javascript 复制代码

// vite.config.js   解决： 按路由拆分，按需加载
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor';  // 第三方库单独打包
        }
      }
    }
  }
}

优化二：代码压缩（Minify）= 抽真空

javascript 复制代码

// vite.config.js   解决： 去掉空格、缩短变量名


build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,   // 去掉 console.log
      drop_debugger: true
    }
  }
}

优化三：CDN 引入第三方库 = 中央厨房统一配送

bash 复制代码

npm install vite-plugin-cdn-import -D

javascript 复制代码

// vite.config.js        解决： 从 CDN 加载，利用浏览器缓存
import cdnPlugin from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    cdnPlugin({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js'
        }
      ]
    })
  ]
})

优化四：Gzip 压缩 = 真空包装盒

bash 复制代码

npm install vite-plugin-compression -D

javascript 复制代码

// vite.config.js          解决： 生成 .gz 文件，传输体积缩小 70%
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,         // 大于 10KB 才压缩
      deleteOriginalAssets: false
    })
  ]
})

辅助工具：打包体积分析 = 打包盒尺寸测量仪

bash 复制代码

npm install rollup-plugin-visualizer -D

javascript 复制代码

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'dist/stats.html'
    })
  ]
})

3. 代码规范工具

①代码规范

Airbnb 规范

javascript 复制代码

// ✅ Airbnb 规范推荐的写法
const userName = '张三';      // 驼峰命名，单引号，加分号
function getUserInfo() {}     // 函数名驼峰，括号前有空格
if (isValid === true) {       // 用 ===，花括号不换行
  console.log('有效');
}

Vue官方规范

javascript 复制代码

<!-- ✅ Vue 官方规范推荐的写法 -->
<template>
  <div class="user-info">     <!-- 模板中用短横线命名 -->
    {{ userName }}
  </div>
</template>

<script>
export default {
  name: 'UserInfo',           // 组件名用帕斯卡命名，至少两个单词
  props: {
    userName: String          // props 用驼峰命名
  }
}
</script>

②ESLint和Prettier

ESLint 是一个"代码检查工具"，帮你找出代码里的语法错误、逻辑问题和潜在 bug。

Prettier 是一个"代码格式化工具"，让你的代码长得整整齐齐。

安装ESLint和Prettier

bash 复制代码

# 安装 ESLint
npm install eslint eslint-plugin-vue -D

# 安装 Prettier
npm install prettier -D

# 安装 Vue 官方配置包（让 ESLint 和 Prettier 不打架）
npm install @vue/eslint-config-prettier -D

ESLint 配置文件（放项目根目录）：

javascript 复制代码

// .eslintrc.json
{
  "root": true,     // 停止向上查找父级配置
  "env": {
    "node": true,     // 支持 Node.js 全局变量
    "browser": true,  // 支持浏览器全局变量
    "es2021": true    // 支持 ES2021 语法
  },
  "extends": [
    "plugin:vue/vue3-recommended",   // 使用 Vue 3 官方推荐规则
    "eslint:recommended",            // 使用 ESLint 官方推荐规则
    "@vue/eslint-config-prettier"    // 关闭与 Prettier 冲突的规则
  ],
  "rules": {
    "no-console": "warn",     // console.log 报警告
    "no-debugger": "warn",    // debugger 报警告
    "eqeqeq": "error",        // 必须使用 === 而不是 ==
    "no-unused-vars": "warn", // 定义了变量但未使用报警告
    "semi": ["error", "always"],  // 语句结尾必须加分号
    "quotes": ["error", "single"], // 字符串必须用单引号
    "indent": ["error", 2],       // 缩进必须为 2 个空格
    "vue/multi-word-component-names": "off" // 关闭组件名必须多单词的限制
  }
}

Prettier 配置文件（同）：

javascript 复制代码

// .prettierrc.json
{
  "singleQuote": true,      // 使用单引号
  "semi": true,             // 语句结尾加分号
  "tabWidth": 2,            // 缩进 2 个空格
  "useTabs": false,         // 用空格代替 Tab
  "trailingComma": "es5",   // 对象/数组最后一项加逗号
  "printWidth": 80,         // 每行最多 80 字符
  "endOfLine": "auto"       // 换行符自动适配系统
}

在package.json中添加npm命令

javascript 复制代码

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix",
    "format": "prettier --write ."
  }
}

运行命令

bash 复制代码

# ESLint 检查 + 自动修复
npm run lint

# Prettier 格式化所有文件
npm run format

配置VS Code自动格式化

javascript 复制代码

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "vue",
    "javascript",
    "typescript"
  ]
}

4.Git

https://blog.csdn.net/2302_79172058/article/details/159966712