vite.config 配置文件

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js（或 vite.config.ts） 的文件。

一、使用 vite 创建的项目里默认的配置

使用 vite 创建项目完成后会自动生成 一个 vite.config.js 文件，当然你可以将其名重定义为 vite.config.ts 文件。其默认代码如下：

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

export default defineConfig({
 plugins: [vue()],
})

二、vite 区分不同环境的配置

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

如果配置需要调用一个异步函数，也可以转而导出一个异步函数：

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // 构建模式所需的特有配置
  }
})

三、vite 基本配置汇总

1、配置本地服务（开发服务器选项）

本地运行时的服务设置，包括：

• host：string | boolean，服务器 IP 地址。
• port：number，服务器端口号。
• strictPort：boolean，设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
• https：boolean | https.ServerOptions，是否启用 https。
• open：boolean | string，设置服务器启动时自动在浏览器中打开的应用程序。
• proxy：Record，为开发服务器配置自定义代理规则。
• cors：boolean | CorsOptions，为开发服务器配置 CORS。默认启用并允许任何源。
• headers：OutgoingHttpHeaders，指定服务器响应的 header。
• force：boolean，设置为 true 强制使依赖预构建。
• hmr：boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }，禁用或配置 HMR 连接。
• watch：object，传递给 chokidar 的文件系统监听器选项。
• middlewareMode：‘ssr’ | ‘html’，以中间件模式创建 Vite 服务器。（不含 HTTP 服务器）
• base：string | undefined，在 HTTP 请求中预留此文件夹，用于代理 Vite 作为子文件夹时使用。应该以 / 字符开始和结束。
• fs
  • strict：boolean，限制为工作区 root 路径以外的文件的访问。
  • allow：string[]，限制哪些文件可以通过 /@fs/ 路径提供服务。
  • deny：string[]，用于限制 Vite 开发服务器提供敏感文件的黑名单。
• origin：string，用于定义开发调试阶段生成资产的 origin。

例如：

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: '3000',
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/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' 的实例
        }
      },
      // 代理 WebSocket 或 socket
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
   }
})

2、配置 @ 符号

需要先安装 @types/node 插件：

npm i -D @types/node

然后，在 vite.config.ts 文件中增加以下配置：

import { resolve } from "path"
 
export default defineConfig({
  // 配置 @ 符号
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  }
})

如果你用到了 ts，需要在 tsconfig.json 的配置文件中增加以下配置：

{
  "compilerOptions": {
   "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    },
  },

以上配置完成后，凡是在 src 文件下的相对路径都可以写成 @ 符号了。

【参考文献】
vite 官网之配置 Vite
关于 vite.config.js 相关配置，拿走不谢