第7章 7.1 Vite 深入配置

🎯 开场 3 分钟：为什么要学这个？

上一章我们亲手撸了一个完整的后台管理系统，从布局到数据交互全自己来——那种「我能做东西」的感觉是不是很爽？

但你有没有遇到过这些糟心事：
- 修改了一行 CSS，页面没反应，必须手动刷新浏览器
- 引入了第三方 UI 库，打包后体积大到离谱，页面加载转圈圈
- 项目的 import 路径写得又臭又长，../../../../components/Button

这些问题，Vite 配置文件能一口气全解决。今天这章，我们就来好好折腾一下 vite.config.ts，让它乖乖听你的话。

学完本文，你能：
- 读懂并修改任意项目的 Vite 配置
- 配好路径别名，再也不用写一串 ../
- 按需引入第三方库，打包体积肉眼可见地变小
- 配置开发服务器自动代理、端口自定义

🧱 基础 25 分钟：核心概念

7.1.1 配置文件到底是个啥？

先来认识一下我们的主角——vite.config.ts。

打开你的项目根目录（\n\n\n\n\n\n就是 package.json 所在的文件夹），新建一个文件叫 vite.config.ts。TypeScript 的后缀意味着我们可以写类型提示，但直接用 .js 也行，不过 .ts 更好，因为 VSCode 会给你智能提示。

生活类比：配置文件就像是你的「个人设置」。比如你买了个新手机，第一件事是设置壁纸、铃声、锁屏密码——这些设置决定手机怎么工作。Vite 配置文件就是告诉 Vite「嘿，我这个项目要这样打包、这样开发」。

7.1.2 最简单的配置长这样

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
// 这里写配置
})

这就是一个最小可用的配置。defineConfig 是一个辅助函数，它帮你做类型推断，让我们写配置时能享受智能提示。

7.1.3 路径别名：再也不用写 `../../../../`

痛点：当你嵌套了三四层目录，import 一个组件要写 import Button from '../../../../components/Button'，数点次数数到怀疑人生。

解决方案：在配置里加一行别名映射。

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
resolve: {
alias: {
  '@': path.resolve(__dirname, './src'),
  '@components': path.resolve(__dirname, './src/components'),
  '@utils': path.resolve(__dirname, './src/utils'),
}
}
})

现在你可以这样写 import：

import Button from '@/components/Button'
import { formatDate } from '@utils/date'

解释：path.resolve(__dirname, './src') 的意思是「找到项目根目录，然后拼接 ./src」。__dirname 是 Node.js 的内置变量，永远指向当前配置文件所在的目录。

7.1.4 按需引入：让打包体积暴瘦

痛点：你用到了 Ant Design Vue 的一个按钮组件，结果打包出来多了一整个 Ant Design 库——30多个组件全进去了冤枉不冤枉？

解决方案：使用 unplugin-vue-components 插件，只打包你用到的组件。

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
plugins: [
Components({
  resolvers: [
    AntDesignVueResolver({
      importStyle: false, // 不需要手动引入样式
    }),
  ],
}),
],
})

这样，假设你模板里只用了 <a-button>，最终打包时只会包含这一个组件的代码。

7.1.5 开发服务器配置：告别端口冲突

痛点：你同时开了项目 A 和项目 B，结果端口都是 3000，报错了还得手动改。

解决方案：自定义开发服务器的端口和主机名。

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
server: {
port: 5173,          // 默认就是 5173，你可以改成其他的
host: '0.0.0.0',    // 允许局域网访问，手机扫码测试超方便
open: true,          // 启动后自动打开浏览器
proxy: {             // 接口代理配置（后面会细讲）
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
  }
}
}
})

7.1.6 CSS 预处理：让 CSS 也能写变量

痛点：你想定义一个主题色，全站都要用，但 CSS 原生不支持变量，改起来要替换几十个地方。

解决方案：用 SCSS/Less，或者直接用 CSS 原生的 CSS Variables。这里我们讲 SCSS，因为 Vue 项目里用得很多。

首先安装依赖：

npm install -D sass

然后在 vite.config.ts 里配置全局变量文件：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
css: {
preprocessorOptions: {
  scss: {
    additionalData: `@import "@/styles/variables.scss";`
  }
}
}
})

现在你新建一个 src/styles/variables.scss：

// src/styles/variables.scss
$primary-color: #1890ff;
$border-radius: 8px;

然后在组件里直接用：

<style lang="scss" scoped>
.button {
background: $primary-color;  // 不用 import，直接用！
border-radius: $border-radius;
}
</style>

🔥 实战 35 分钟：3 个递进的小项目

项目 1（5 分钟）：配置好别名和 SCSS

目标：新建一个 Vue 项目，配置好路径别名和 SCSS 全局变量，体验「改一处，全站生效」。

完整代码步骤：

初始化项目（如果还没有的话）：

npm create vite@latest my-vite-demo -- --template vue-ts
cd my-vite-demo
npm install

mkdir -p src/styles src/components src/utils
touch src/styles/variables.scss

编写 src/styles/variables.scss：

$theme-color: #52c41a;
$font-size-base: 14px;

编写 vite.config.ts：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
resolve: {
alias: {
  '@': path.resolve(__dirname, './src'),
}
},
css: {
preprocessorOptions: {
  scss: {
    additionalData: `@import "@/styles/variables.scss";`
  }
}
}
})

编写 src/components/GreenButton.vue：

<template>
<button class="green-btn">点我</button>
</template>

<style lang="scss" scoped>
.green-btn {
background: $theme-color;
color: white;
font-size: $font-size-base;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>

改 src/App.vue：

<template>
<GreenButton />
</template>

<script setup lang="ts">
import GreenButton from '@/components/GreenButton.vue'
</script>

运行看效果：

npm run dev

预期输出：页面上显示一个绿色按钮。

解释：现在你修改 variables.scss 里的 $theme-color，所有组件都会跟着变——这就是「改一处，全站生效」。

项目 2（15 分钟）：配置接口代理

目标：前端开发时解决跨域问题，把 /api 开头的请求代理到后端服务器。

场景：后端接口在 http://localhost:3000/api/users，你不想在前端代码里写这个完整地址，想用相对路径 /api/users。

完整代码：

vite.config.ts：

import { defineConfig } from 'vite'

export default defineConfig({
server: {
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀
  }
}
}
})

然后在组件里这样调用：

const fetchUsers = async () => {
const res = await fetch('/api/users')
const data = await res.json()
console.log(data)
}

预期输出：请求被代理到 http://localhost:3000/users（注意 /api 前缀被去掉了）。

解释：changeOrigin: true 让代理请求时把 host 头改成目标服务器的，避免有些后端服务校验 host 来源。

项目 3（15 分钟）：做一个配置管理面板

目标：写一个可视化的「配置文件编辑器」，可以查看和修改项目的 vite.config.ts。

完整代码：

src/App.vue：

<template>
<div class="config-panel">
<h1>Vite 配置管理</h1>

<div class="config-item">
  <label>开发服务器端口：</label>
  <input v-model.number="config.server.port" type="number" />
</div>

<div class="config-item">
  <label>是否自动打开浏览器：</label>
  <input v-model="config.server.open" type="checkbox" />
</div>

<div class="config-item">
  <label>路径别名：</label>
  <input v-model="alias" placeholder="@ -> src" />
</div>

<pre class="config-preview">{{ preview }}</pre>

<button @click="copyConfig">复制配置</button>
</div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'

const config = reactive({
server: {
port: 5173,
open: true
}
})

const alias = ref('@ -> src')

const preview = computed(() => `
export default defineConfig({
server: {
port: ${config.server.port},
open: ${config.server.open}
},
resolve: {
alias: {
  '${alias.value.split(' -> ')[0]}': path.resolve(__dirname, './${alias.value.split(' -> ')[1]}')
}
}
})

`)

const copyConfig = async () => {
await navigator.clipboard.writeText(preview.value)
alert('配置已复制到剪贴板！')
}
</script>

<style lang="scss" scoped>
.config-panel {
padding: 24px;
max-width: 600px;
margin: 0 auto;
}

.config-item {
margin-bottom: 16px;

label {
display: block;
margin-bottom: 4px;
font-weight: bold;
}

input {
padding: 8px;
width: 100%;
box-sizing: border-box;
}
}

.config-preview {
background: #f5f5f5;
padding: 16px;
border-radius: 4px;
overflow: auto;
margin: 16px 0;
}
</style>

预期输出：一个表单，修改后会实时生成对应的配置代码，点击按钮可以复制。

解释：这个工具帮你「所见即所得」地生成配置，不用死记硬背各种配置项。

💪 进阶 20 分钟：常见坑 + 性能小贴士

坑 1：路径别名不生效？

❌ 错误写法——用了相对路径：

alias: {
'@': './src'  // 错！相对路径在某些场景下会出问题
}

✅ 正确写法——用 path.resolve：

import path from 'path'

alias: {
'@': path.resolve(__dirname, './src')
}

坑 2：SCSS 变量不认？

❌ 错误写法——忘了安装 sass：

npm run dev
# 报错：Preprocessor dependency "sass" not found

✅ 正确做法：

npm install -D sass

坑 3：代理不生效？

❌ 错误写法——target 少了协议头：

proxy: {
'/api': {
target: 'localhost:3000'  // 错！少了 http://
}
}

✅ 正确写法：

proxy: {
'/api': {
target: 'http://localhost:3000'
}
}

坑 4：`__dirname` 报 TS 错误？

❌ 错误：TypeScript 说 __dirname 不存在。

✅ 解决：安装类型声明并配置 tsconfig.json：

npm install -D @types/node

在 vite.config.ts 顶部加：

/// <reference types="node" />
import { defineConfig } from 'vite'

坑 5：修改配置后没反应？

Vite 的配置只在启动时读取一次。修改 vite.config.ts 后必须重启开发服务器（Ctrl+C 然后重新 npm run dev）。

性能小贴士：生产构建优化

如果你的项目用到了很多图片，可以配置图片压缩：

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
plugins: [
viteCompression({
  algorithm: 'gzip',
  ext: '.gz',
}),
],
})

这样打包后会生成 .gz 文件，服务器启用 gzip 压缩后，用户下载体积能减少 70% 左右。

调试技巧：打印配置值

有时候你想确认某个配置有没有生效，可以在 vite.config.ts 里打印：

import { defineConfig } from 'vite'
import path from 'path'

const config = defineConfig({
// ...
})

console.log('别名配置：', config.resolve?.alias)

export default config

运行 npm run dev 后，看终端输出的日志。

✏️ 练习题 + 作业题

练习题（10 分钟）

练习 1（2 分钟）：改端口
- 输入：在 vite.config.ts 里把端口改成 8080
- 预期输出：运行 npm run dev 后，终端显示 Local: http://localhost:8080
- 提示：找 server.port 这个配置项

练习 2（2 分钟）：加一个新别名
- 输入：在原有 @ 别名基础上，加一个 @assets 别名指向 src/assets
- 预期输出：import img from '@assets/logo.png' 能正常引用
- 提示：参考 resolve.alias 的配置格式

练习 3（2 分钟）：SCSS 变量实战
- 输入：在 variables.scss 里定义一个 $warning-color: #faad14，在组件里使用它
- 预期输出：页面上的警告文字是橙色的
- 提示：additionalData 已经全局引入了变量文件，不用手动 import

练习 4（2 分钟）：修复代理配置
- 输入：下面的配置错在哪？

proxy: {
'/api': {
target: 'localhost:3000'
}
}

预期输出：说出错误并写出正确写法
提示：检查 target 的格式

练习 5（2 分钟）：分析报错
- 输入：运行项目后报错 Preprocessor dependency "sass" not found
- 预期输出：说出原因并写出修复命令
- 提示：这个依赖需要单独安装

作业题（30 分钟-2 小时）

作业：做一个「Vite 配置生成器」

需求描述：做一个可视化页面，输入项目信息后，生成完整的 vite.config.ts 代码
功能点：
1. 输入框：端口号、是否自动打开浏览器
2. 多选框：需要哪些别名（@、@components、@utils）
3. 按钮：点击生成配置代码
4. 一键复制功能
加分项：
1. 实时预览生成的配置代码
2. 支持导出为文件下载
验收标准：能跑起来、配置代码语法正确、复制功能正常
提交方式：评论区贴代码或 GitHub 链接

📚 总结 + 资源

本文学到的 3 个核心点：
1. vite.config.ts 是整个项目的「控制面板」，控制打包、开发服务器、CSS 预处理等方方面面
2. 路径别名让 import 语句从 ../../../../components/Button 变成 @/components/Button
3. 按需引入和代理配置能极大提升开发体验和最终用户体验

延伸学习资源：
- Vite 官方文档——最权威的配置参考
- unplugin-vue-components 文档——组件按需引入必备
- 《Vue 3设计与实现》——深入理解 Vue 生态

互动钩子：
「你配置 Vite 时踩过什么坑？是别名不生效还是代理一直失败？评论区聊聊，老粉优先回复！」

下一章我们要聊聊「工程化」——写代码一时爽，一直写代码一直爽，但代码规范谁来管？下一章教你用 ESLint + Prettier + Husky 搭一套自动化代码质量检查流程，让你的代码「写完就自动格式化，提交前就自动检查」。敬请期待！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

第7章 7.1 Vite 深入配置

第7章 7.1 Vite 深入配置

🧱 基础 25 分钟：核心概念

7.1.1 配置文件到底是个啥？

7.1.2 最简单的配置长这样

7.1.3 路径别名：再也不用写 `../../../../`

7.1.4 按需引入：让打包体积暴瘦

7.1.5 开发服务器配置：告别端口冲突

7.1.6 CSS 预处理：让 CSS 也能写变量

🔥 实战 35 分钟：3 个递进的小项目

项目 1（5 分钟）：配置好别名和 SCSS

项目 2（15 分钟）：配置接口代理

项目 3（15 分钟）：做一个配置管理面板

💪 进阶 20 分钟：常见坑 + 性能小贴士

坑 1：路径别名不生效？

坑 2：SCSS 变量不认？

坑 3：代理不生效？

坑 4：`__dirname` 报 TS 错误？

坑 5：修改配置后没反应？

性能小贴士：生产构建优化

调试技巧：打印配置值

✏️ 练习题 + 作业题

练习题（10 分钟）

作业题（30 分钟-2 小时）

📚 总结 + 资源

评论(0)

提示：请文明发言取消回复

排行榜展示

第10章 10.3 终极项目：仿 V2EX 论坛 API

第3章 3.3 作用域与闭包

第10章 10.5 终极实战：CLI 工具开发

第10章 10.1 实时聊天系统（WebSocket）

第5章 5.4 浏览器存储：localStorage/sessionStorage/IndexedDB

第10章 10.1 uniapp 源码解析：Python 进阶视角

第7章 7.1 Vite 深入配置

第7章 7.1 Vite 深入配置

🧱 基础 25 分钟：核心概念

7.1.1 配置文件到底是个啥？

7.1.2 最简单的配置长这样

7.1.3 路径别名：再也不用写 ../../../../

7.1.4 按需引入：让打包体积暴瘦

7.1.5 开发服务器配置：告别端口冲突

7.1.6 CSS 预处理：让 CSS 也能写变量

🔥 实战 35 分钟：3 个递进的小项目

项目 1（5 分钟）：配置好别名和 SCSS

项目 2（15 分钟）：配置接口代理

项目 3（15 分钟）：做一个配置管理面板

💪 进阶 20 分钟：常见坑 + 性能小贴士

坑 1：路径别名不生效？

坑 2：SCSS 变量不认？

坑 3：代理不生效？

坑 4：__dirname 报 TS 错误？

坑 5：修改配置后没反应？

性能小贴士：生产构建优化

调试技巧：打印配置值

✏️ 练习题 + 作业题

练习题（10 分钟）

作业题（30 分钟-2 小时）

📚 总结 + 资源

评论(0)

提示：请文明发言 取消回复

相关文章

排行榜展示

7.1.3 路径别名：再也不用写 `../../../../`

坑 4：`__dirname` 报 TS 错误？

提示：请文明发言取消回复