Vite 学习笔记 - 第二篇：配置与开发优化

1. 配置路径别名（如 @）

为了简化模块引用路径，可以在 Vite 中配置路径别名。

修改 vite.config.js：

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

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

使用方式：

import MyComponent from '@/components/MyComponent.vue'

---

2. 自动引入组件（适用于 Vue）

通过插件 unplugin-vue-components，可以实现组件按需自动引入。

安装插件：

npm install -D unplugin-vue-components

修改 vite.config.js：

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components()
  ]
})

---

3. 使用环境变量

Vite 支持使用 .env 文件来配置环境变量。

创建 .env 文件：

VITE_API_URL=https://api.example.com

使用方式：

console.log(import.meta.env.VITE_API_URL)

注意：变量必须以 VITE_ 开头，才能被 Vite 正确识别。

---

4. 支持 SCSS 等 CSS 预处理器

安装 SASS：

npm install -D sass

在组件中使用：

<style lang="scss">
$main-color: #42b983;

.title {
  color: $main-color;
}
</style>

---

小结

• 配置 @ 别名可提高模块引用效率
• 使用插件可提升开发体验
• 环境变量可按环境切换 API 等信息
• SCSS 提供更强大的样式功能