一、使用 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.ServerOptions，是否启用 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: '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 @types/node -D

在 vite.config.ts 中增加配置：

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

在 tsconfig.json 中增加配置：

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

重启编辑器即可。

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

vite.config 配置文件相关推荐

Vue 2 中，使用Vite作为前端构建开发工具，替代webpack（一）——vite.config.js配置文件
Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)--vite.config.js配置文件当前版本 vite@2.3.7和vite@2.4.4 "vite" ...
Python中logging.config配置文件解读
Python中logging.config配置文件解读下面的函数用于配置logging模块,它们位于logging.config模块中.你可以使用这些函数来配置,也可以在logging或是loggi ...
Web.config配置文件详解(新手必看)
Web.config配置文件详解(新手必看) 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点. ...
web.config配置文件详解
一.认识Web.config文件 Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式), ...
使用ssh config配置文件来管理ssh连接
我本人其实及其烦使用配置文件这种东西,有时候看到巨大又复杂的配置文件,甚至复杂过代码的时候,总感觉设计配置文件的人有些本末倒置. 但是ssh这个配置文件真的非常简单好用,让我稍微体验了一次配置文件使用 ...
.NET Core 2.0迁移技巧之web.config配置文件
大家都知道.NET Core现在不再支持原来的web.config配置文件了,取而代之的是json或xml配置文件.官方推荐的项目配置方式是使用appsettings.json配置文件,这对现有一些重 ...
[网络收集]Web.config配置文件详解
摘录自:http://hi.baidu.com/fanfanwuji/blog/item/a7fd8928d49a7ef098250a06.html 花了点时间整理了一下ASP.NET Web.con ...
为每一个应用程序池单独设置aspnet.config配置文件
为每一个应用程序池单独设置aspnet.config配置文件 ASP.NET2.0之后的版本号就在各Framework的根文件夹下提供了一个aspnet.config文件.这个文件用来配置全局的一些信 ...
WPF读写config配置文件
WPF读写config配置文件单. 1. 在你的工程中,添加app.config文件.文件的内容默认为: 1 <?xml version="1.0" encoding=&qu ...
Winform—C#读写config配置文件
现在FrameWork2.0以上使用的是:ConfigurationManager或WebConfigurationManager.并且AppSettings属性是只读的,并不支持修改属性值．一.如 ...

vite.config 配置文件

目录

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

1、vue 项目

2、react 项目

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

三、vite 基本配置汇总

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

2、配置 @ 符号

vite.config 配置文件相关推荐

最新文章

热门文章