配置文件

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

1、vue 项目

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

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

2、react 项目

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

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

二、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。
open：boolean | string，设置服务器启动时自动在浏览器中打开的应用程序。
proxy：Record<string, string | ProxyOptions>，为开发服务器配置自定义代理规则。
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: '',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: '',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: '',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // 代理 WebSocket 或 socket
      '/': {
        target: 'ws://localhost:3000',
        ws: true
      }
   }
})

2、配置 @ 符号

需要先安装 @types/node 依赖包：

npm i @types/node -D

在中增加配置：

const { resolve } = require('path')

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

在中增加配置：

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

重启编辑器即可。

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

秒客网

目录

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

1、vue 项目

2、react 项目

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

三、vite 基本配置汇总

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

2、配置 @ 符号

相关文章