Vite 配置篇：日常开发掌握这些配置就够了！

不知道有没有这样的兄弟，学习 Vite 的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手 Vite 有所帮助。话不多说，开干！

css.preprocessorOptions

传递给 CSS 预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在 scss 中定义一个全局变量：

// vite.config.js
import {
    defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：

export default defineConfig({
   
  css: {
   
    preprocessorOptions: {
   
      scss: {
   
        additionalData: `$injectedColor: orange;` // 全局变量
      }
    }
  }
})

我们也可以定义一个全局变量文件，然后再引入这个文件：

// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;

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

export default defineConfig({
   
  css: {
   
    preprocessorOptions: {
   
      scss: {
   
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件
      }
    }
  }
})

这样在 .scss 文件或 .vue 文件中就可以使用这些变量了。

css.postcss

PostCSS 也是用来处理 CSS 的，只不过它更像是一个工具箱，可以添加各种插件来处理 CSS 。像浏览器样式兼容问题、浏览器适配等，都可以通过 PostCSS 来解决。

Vite 对 PostCSS 有良好的支持，我们只需要安装相应的插件就可以了。如移动端使用 postcss-px-to-viewport 对不同设备进行布局适配：

npm install postcss-px-to-viewport -D

// vite.config.js
import {
    defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
   
  css: {
   
    postcss: {
   
      plugins: [
        // viewport 布局适配
        postcssPxToViewport({
   
          viewportWidth: 375
        })
      ]
    }
  }
})

这样我们书写的 px 单位就会转为 vw 或 vh ，很轻松地解决了适配问题。

resolve.alias

定义路径别名也是我们常用的一个功能，我们通常会给 scr 定义一个路径别名：

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

export default defineConfig({
   
  resolve: {
   
    alias: {
   
      '@': path.resolve(__dirname, <