vite: common configurations

I have been tinkering with Vite recently. Since I have been using React, I chose Vite and React to experience Vite.

Create an application using the simplest method: yarn create vite, and then choose the react framework.

The default configuration of vite uses the defineConfig tool function:

import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

Whether it is js or ts, you can directly use the defineConfig tool function. If you need to choose different options based on the dev, serve or build commands, then choose to export a function, such as:

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

Sharing options

root

This is the project root directory [location of index.html], which can be configured according to the specifications of your own project. for example:

const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  return {
    root,
    plugins: [react()]
  };
});

base

Common base path for development or production environment services:

mode

mode is to specify the mode, such as: development or production. If configured in vite.config.ts, then the serve and build modes will be overwritten.

plugin

The plug-ins that the application needs to use are an array, because many plug-ins may be used in the application. The plug-in in vite+react is react, for example:

import react from "@vitejs/plugin-react";
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()]
  };
});

resolve.alias

Set alias, for example: full configuration

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

const root: string = process.cwd();

// 查找路径
const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
};
// 别名
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build"),
};
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()],
    resolve: {
      alias,
    },
  };
});

server

Development server configuration options.

1. host, specifies an IP address that the development server monitors. If it is set to 0.0.0.0or true, it will monitor all addresses by default.
2. port, development server port number
3. strictPort, when set to true, if the port number is occupied, it will exit directly.
4. https, whether to enable HTTPS
5. open, automatically opens the application in the browser
6. proxy, the proxy of the request path, such as

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})