DAY 111.Vite打开package.json看看scripts部分每次敲的这 3 个命令背后的主角就是Vite。{ 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开发开启 MockVITE_ENABLE_MOCK false生产关闭 Mock开发环境使用模拟数据生产环境调用真实接口日志调试开关控制日志输出级别VITE_LOG_LEVEL debug开发输出所有日志VITE_LOG_LEVEL error生产只输出错误开发时便于调试生产时减少控制台输出第三方服务密钥不同环境使用不同的第三方服务配置VITE_MAP_KEY test_xxx开发测试 KeyVITE_MAP_KEY prod_xxx生产正式 Key地图服务、统计工具、支付等第三方 SDK部署路径配置配置应用部署的子路径VITE_PUBLIC_PATH /根路径部署VITE_PUBLIC_PATH /admin/子路径部署应用部署在域名根目录或子目录下请求超时时间不同环境设置不同的超时时间VITE_REQUEST_TIMEOUT 30000开发长一些VITE_REQUEST_TIMEOUT 10000生产短一些开发环境网络慢适当延长超时时间CDN 资源地址不同环境使用不同的静态资源 CDNVITE_CDN_URL https://cdn-test.xxx.com测试 CDNVITE_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区分开发环境和生产环境的配置差异2. 掌握 Vite 打包优化方法配置打包输出目录、压缩代码、CDN 引入第三方库减少打包体积和加载时间3. 实操配置项目的开发和生产环境变量如接口基础地址优化项目打包配置实现打包体积压缩4. 拓展了解 Vite 插件的使用如 vite-plugin-compression 实现 gzip 。压缩②Vite打包优化Vite 打包优化汇总表优化一代码分割Code Splitting 菜品分装// vite.config.js 解决 按路由拆分按需加载 build: { rollupOptions: { output: { manualChunks(id) { if (id.includes(node_modules)) { return vendor; // 第三方库单独打包 } } } } }优化二代码压缩Minify 抽真空// vite.config.js 解决 去掉空格、缩短变量名 build: { minify: terser, terserOptions: { compress: { drop_console: true, // 去掉 console.log drop_debugger: true } } }优化三CDN 引入第三方库 中央厨房统一配送npm install vite-plugin-cdn-import -D// 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/vue3/dist/vue.global.prod.js } ] }) ] })优化四Gzip 压缩 真空包装盒npm install vite-plugin-compression -D// 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 }) ] })辅助工具打包体积分析 打包盒尺寸测量仪npm install rollup-plugin-visualizer -D// vite.config.js import { visualizer } from rollup-plugin-visualizer export default defineConfig({ plugins: [ visualizer({ open: true, filename: dist/stats.html }) ] })③Vite打包原理源码阶段 ├── src/ │ ├── main.js (入口文件) │ ├── App.vue (根组件) │ ├── router/ (路由) │ └── views/ (页面组件) └── node_modules/ ├── vue └── element-plus ↓ Vite 打包流程 ↓ ┌─────────────────────────────────────────────────────┐ │ 1. 解析入口 │ │ 从 main.js 开始找到所有依赖 │ └─────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────┐ │ 2. 依赖分析 │ │ main.js → App.vue → Home.vue → ... │ │ 形成一棵依赖树 │ └─────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────┐ │ 3. 代码分割 (Code Splitting) │ │ - 路由懒加载每个页面单独打包 │ │ - 依赖分离vue.js、element-plus 单独打包 │ └─────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────┐ │ 4. 压缩代码 │ │ - 删除空格、注释 │ │ - 变量名缩短 │ │ - tree shaking删除没用的代码 │ └─────────────────────────────────────────────────────┘最终产物④打包过程中出现的问题路径错误你的代码 ├── index.html └── assets/ ├── index.js └── style.css vite.config.js 配置 base: / ← 默认值绝对路径 打包后的 index.html script src/assets/index.js ↑ 从根目录开始找 假设网站根目录是 example.com 实际找example.com/assets/index.js ✓ 但如果你放在子目录 example.com/my-app/ 实际找example.com/assets/index.js ✗应该是 example.com/my-app/assets/index.js3. 代码规范工具①代码规范Airbnb 规范// ✅ Airbnb 规范推荐的写法 const userName 张三; // 驼峰命名单引号加分号 function getUserInfo() {} // 函数名驼峰括号前有空格 if (isValid true) { // 用 花括号不换行 console.log(有效); }Vue官方规范!-- ✅ Vue 官方规范推荐的写法 -- template div classuser-info !-- 模板中用短横线命名 -- {{ userName }} /div /template script export default { name: UserInfo, // 组件名用帕斯卡命名至少两个单词 props: { userName: String // props 用驼峰命名 } } /script②ESLint和PrettierESLint 是一个代码检查工具帮你找出代码里的语法错误、逻辑问题和潜在 bug。Prettier 是一个代码格式化工具让你的代码长得整整齐齐。安装ESLint和Prettier# 安装 ESLint npm install eslint eslint-plugin-vue -D 或 pnpm add -D eslint/js # 安装 Prettier npm install prettier -D # 安装 Vue 官方配置包让 ESLint 和 Prettier 不打架 npm install vue/eslint-config-prettier -DESLint 配置文件放项目根目录// .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 配置文件同// .prettierrc.json { singleQuote: true, // 使用单引号 semi: true, // 语句结尾加分号 tabWidth: 2, // 缩进 2 个空格 useTabs: false, // 用空格代替 Tab trailingComma: es5, // 对象/数组最后一项加逗号 printWidth: 80, // 每行最多 80 字符 endOfLine: auto // 换行符自动适配系统 }在package.json中添加npm命令// package.json { scripts: { dev: vite, build: vite build, preview: vite preview, lint: eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix, format: prettier --write . } }运行命令# ESLint 检查 自动修复 npm run lint # Prettier 格式化所有文件 npm run format配置VS Code自动格式化// .vscode/settings.json { editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: true }, eslint.validate: [ vue, javascript, typescript ] }4.Githttps://blog.csdn.net/2302_79172058/article/details/1599667125. 项目重构工程化思维原则 1单一职责一个文件/模块只做一件事// ❌ 之前user.js 做所有事 // 登录 用户信息 地址 API // ✅ 之后拆分成多个 Store // auth.js → 只负责登录/登出 // userProfile.js → 只负责用户信息 // address.js → 只负责地址原则 2高内聚低耦合相关的东西放一起不相关的分开// ❌ 之前演示页面和业务页面混在一起 views/ ├── ElementDemo.vue ├── TableDemo.vue ├── Login.vue ├── Home.vue └── todo/ // ✅ 之后按模块分组 views/ ├── demo/ ← 演示模块 │ ├── ElementDemo.vue │ └── TableDemo.vue ├── auth/ ← 认证模块 │ └── Login.vue ├── home/ ← 首页模块 │ └── Home.vue └── todo/ ← 待办模块 ├── TodoList.vue └── TodoDetail.vue原则 3配置与代码分离把可变的东西做成配置// ❌ 之前白名单写死在代码里 const whiteList [/login, /, /form] // ✅ 之后从路由配置读取 // 在每个路由里加 meta { path: /login, meta: { requiresAuth: false } // 配置项 } // 守卫里判断 if (to.meta.requiresAuth false || !to.meta.requiresAuth) { next() }DAY 12前端其他相关技术1.Axios 接口请求①axios概念Axios是JavaScript世界里的一个工具库。它不是新的编程语言也不是框架它就是一个写好的“.js”文件里面封装了很多现成的函数专门用来帮你干一件事发HTTP请求。一个专门帮你的网页“要数据”和“传数据”的工具包。你想给朋友送礼物有两种方式 方式 1自己送很累 ├── 查路线 ├── 开车/走路 ├── 打电话确认地址 ├── 可能迷路 └── 送到 方式 2找快递员专业 ├── 只需要填地址 ├── 快递员负责一切 ├── 丢了能赔 └── 送到家 ────────────────────────────────────────────── 对应到编程 方式 1fetch()自己送 方式 2Axios快递员②axios工作基础——HTTP请求Axios工作的基础是互联网的底层协议 HTTP超文本传输协议。你可以把它理解为前端的“快递单”。一个标准的HTTP请求包含四个核心要素要素理论解释Axios中的对应请求方法告诉服务器你要干什么GET取、POST增、PUT/PATCH改、DELETE删URL地址告诉服务器你要找谁接口地址如https://api.example.com/users请求头附带一些“元信息”比如身份令牌、数据格式声明请求体你要传给服务器的具体数据比如登录时的用户名密码Axios 的作用就是帮你组装这张“快递单”然后交给浏览器/Node.js去投递。③axios核心理论基础——Promise这是理解Axios最重要的理论门槛。为什么Axios的写法是.then().catch()因为 网络请求是“异步”的。同步像排队打饭前面的人没打完你就得干等着页面会卡死。异步像点外卖你下单后不需要站在店门口等可以先去干别的外卖到了会打电话叫你.then或者告诉你送不到.catch。Axios 基于 Promise 设计所以它的所有请求方法get、post等都会返回一个 Promise 对象。这个对象有三个状态Pending待定请求发出去了还没收到回复。Fulfilled已兑现请求成功服务器返回数据了 → 触发.then()Rejected已拒绝请求失败网络断了、服务器报错等→ 触发.catch()理论结论Axios本质上是一个 Promise 生成器它把“发送请求”这个动作包装成一个“待定状态的承诺”等结果出来再执行对应的回调。④axios使用第 1 步安装 Axiospnpm add axios第二步配置utils/request.js见文章顶部绑定资源2.Mock 数据模拟// 你写的 api/todo.js打开你现在的文件看 // ① 小哥Axios的get/post真工具专门跑腿 import { get } from /utils/request // ② 商家地址BASE_URL是【假的商家Mock】 // 换成真的商家你以后写的后端也可以 const BASE_URL https://jsonplaceholder.typicode.com // ③ 小哥接单送单真跑腿但送到假商家 export async function fetchTodoList() { // 用真小哥Axios把请求送到假商家jsonplaceholder const response await get(${BASE_URL}/todos) // 小哥拿到假商家的假菜假数据拿给你 return response }