构建配置示例

根据以上对于各种常用配置项的列举，下面给出一个用于前后端分离的React项目的示例配置。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://local.mock.server/',
        changeOrigin: true,
        secure: false,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

对于目前基于React提供的样式框架和组件库，有相当一部分都使用了样式预处理器的变量功能来定义其主题。所以当我们在使用这些组件库的时候，一旦需要使用自定义的主题或者主题颜色，就需要按照组件库的文档，修改样式预处理器代码中定义的变量。在使用Webpack完成代码编译的项目中，这种变量值重定义的工作通常是通过样式预处理器的Loader来完成的。

以使用Less样式预处理器的组件库为例，在使用Webpack完成代码编译的情况下，通常需要在Webpack的配置文件中增加以下内容来自定义主题颜色。

module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader'
        },
        {
          loader: 'less-loader',
          options: {
            modifyVars: {
              'primary-color': '#f85959'
            },
            javascriptEnabled: true
          }
        }
      ]
    }
  ]
};

但是在使用Vite的情况下，同样是对Less样式预处理器中变量值的修改，所需要完成的动作就比较简单了。首先我们需要一个库的帮助，来把Less文件转换成JavaScript文件。

npm install -D less-vars-to-js

然后在src目录下的theme.less中定义所有需要被替换的Less变量。最后就只需要在vite.config.js配置文件文件中载入theme.less即可。这样一来， vite.config.js的内容就变成了以下样子。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import lessToJS from 'less-vars-to-js';
import path from 'path';
import fs from 'fs';

const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './src/theme.less'), 'utf8'));

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: themeVariables
      }
    }
  }
});

现在，只需要修改theme.less文件中的内容，就可以改变整个应用的主题颜色以及样式配置了。