vite.config.ts配置

vite.config.ts 是 Vite 项目的配置文件，用于配置构建选项和插件。以下是一个详细的配置及说明：

base：用于指定项目的基础路径，通常用于将项目部署到子路径的情况。

默认值：\’/\’
build：包含了构建相关的配置选项。

outDir：构建输出目录。
minify：是否压缩代码。
sourcemap：是否生成sourcemap。
server：用于配置开发服务器。

host：主机地址。
port：端口号。
proxy：代理设置。
resolve：用于配置模块解析规则。

alias：路径别名。
extensions：模块文件后缀名的解析顺序。
plugins：用于配置 Vite 插件。可以对代码进行转换、引入第三方库等。

define：用于定义全局变量。

在此可以定义一些常量，比如不同环境下的接口地址、应用名称等。
css：用于配置 CSS 相关的选项。

preprocessorOptions：预处理器选项。
importLoaders：导入加载器数量。
sbuild：用于配置 esbuild 相关的选项。

jsxFactory：JSX 工厂函数名称。
jsxFragment：JSX 片段工厂函数名称。
env：用于定义环境变量。可以在不同的环境（如开发、生产）下使用不同的设置。

rootDir：项目根目录，默认为当前工作目录。

publicDir：静态资源服务的文件夹，打包时 public 文件夹内容会被复制到 dist 文件夹下。

assetsDir：静态资源目录，编译时会被复制到 dist 文件夹下。

outputDir：编译后的文件输出目录，默认为 \’dist\’。

scriptPreload：预加载脚本的 URL，用于在页面加载前预加载脚本，提高页面加载速度。

buildInPlugins：构建时自动加载的插件列表，可以指定多个插件，用逗号分隔。

defineConfig：定义全局变量的配置项，可以通过在项目根目录下的 vite.config.ts 文件中进行定义和使用。例如 defineConfig({ define: { DEBUG: true } }) 会在整个项目中定义一个名为 DEBUG 的全局变量，值为 true。

serverMiddleware：开发服务器中间件配置项，可以在项目根目录下的 vite.config.ts 文件中进行定义和使用。中间件可以在请求和响应之间对数据进行处理，可以用来实现跨域请求、自定义路由等功能。

clientBuildTimeout：客户端构建超时时间，单位为毫秒，默认为 30000 毫秒（30 秒）。当客户端构建超过该时间时，会抛出错误并终止构建过程。

buildOptions：构建选项配置项，可以在项目根目录下的 vite.config.ts 文件中进行定义和使用。该配置项用于指定构建过程中的各种选项和参数，如压缩代码、生成源映射表等。

import { defineConfig, loadEnv } from \’vite\’
import type { UserConfig, ConfigEnv } from \’vite\’
import vue from \’@vitejs/plugin-vue\’
import vueJsx from \’@vitejs/plugin-vue-jsx\’ //tsx插件引入
import AutoImport from \’unplugin-auto-import/vite\’ //自动引入ref,reactive等等等

// 配置antd-v按需加载(可以用别的)
import Components from \’unplugin-vue-components/vite\’
import { AntDesignVueResolver } from \’unplugin-vue-components/resolvers\’

// import path from \’path\’;
import { resolve, join } from \’path\’
import { wrapperEnv } from \’./build/utils\’

// defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {

console.log(command, mode, \’===\’)
const root = process.cwd()
const env = loadEnv(mode, root) // 环境变量对象
console.log(\’环境变量——\’, env)
console.log(\’文件路径（ process.cwd()）——\’, root)
console.log(\’文件路径（dirname）——\’, __dirname + \’/src\’)
const { VITE_DROP_CONSOLE } = wrapperEnv(env)

// dev 独有配置
return {

root, //项目根目录（index.html 文件所在的位置）默认： process.cwd()

base: \’/\’,
// 开发或生产环境服务的公共基础路径：默认\’/\’
// 1、绝对 URL 路径名： /foo/；
// 2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）

//注意：设置开发者模式以及生产模式访问路径
base: process.env.NODE_ENV === \”production\” ? \”/线上访问路径/\” : \”./\”,

publicDir: resolve(__dirname, \’./dist\’),
//默认\’public\’ 作为静态资源服务的文件夹 (打包public文件夹会没有，里面得东西会直接编译在dist文件下)

assetsInclude: resolve(__dirname, \’./src/assets\’),
// 静态资源处理

//*****定义全局变量******
define: {
MENU_PATH: `\”path\”`,
MENU_SHOW: `\”isShowOnMenu\”`,
MENU_KEEPALIVE: `\”keepAlive\”`,
MENU_KEY: `\”key\”`,
MENU_ICON: `\”icon\”`,
MENU_TITLE: `\”title\”`,
MENU_CHILDREN: `\”children\”`,
MENU_PARENTKEY: `\”parentKey\”`,
MENU_ALLPATH: `\”allPath\”`,
MENU_PARENTPATH: `\”parentPath\”`,
MENU_LAYOUT: `\’layout\’`,
__IS_THEME__: `${process.env.REACT_APP_COLOR === \”1\”}`,
CUSTOMVARLESSDATA: `${JSON.stringify(customVarLessJson)}`
},

//注意还有这一种，可根据实际需求配置
envPrefix: [\’VITE\’, \’VUE\’], // 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量
// 环境变量配置
define: {
\’process.env.VUE_APP_URL\’:JSON.stringify(env.VUE_APP_URL),
},

// ******插件配置******
plugins: [
vue(),
vueJsx(),
AutoImport({
imports: [
\’vue\’,
\’vue-router\’,
\’pinia\’,
{
axios: [
[\’default\’, \’axios\’] // import { default as axios } from \’axios\’,
]
}
],
dts: \’types/auto-import.d.ts\’ //生成全局引入的文件
}),
Components({
resolvers: [
AntDesignVueResolver({
importStyle: \’less\’ //修改antdv主题色
})
]
})
],

// ******开发服务器配置******
server: {
https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项也被使用时，将会仅使用 TLS
host: true, // 监听所有地址
port: 8080, //指定开发服务器端口：默认3000
open: true, //启动时自动在浏览器中打开
cors: false, //为开发服务器配置 CORS
proxy: {
//配置自定义代理规则
// 字符串简写写法
\’/jpi\’: \’http://192.168.1.97:4567\’,
\’/api\’: {
target: \’http://192.168.1.97:108\’,
changeOrigin: true, //是否跨域
rewrite: path => path.replace(/^\\/api/, \’\’)
}
}
// hmr: {
// overlay: false
// }
},

// ******项目构建配置******
build: {
target: \’modules\’, //设置最终构建的浏览器兼容目标 //es2015(编译成es5) | modules
outDir: \’dist\’, // 构建得包名默认：dist
assetsDir: \’assets\’, // 静态资源得存放路径文件名 assets
sourcemap: false, //构建后是否生成 source map 文件
brotliSize: false, // 启用/禁用 brotli 压缩大小报告。禁用该功能可能会提高大型项目的构建性能
minify: \’esbuild\’, // 项目压缩 :boolean | \’terser\’ | \’esbuild\’
chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
cssTarget: \’chrome61\’ //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式 (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
},

// ******resolver配置******
resolve: {
alias: {
// 别名配置
// 键必须以斜线开始和结束
\’@\’: resolve(__dirname, \’src\’),
components: resolve(__dirname, \’./src/components\’),
assets: resolve(__dirname, \’./src/assets\’),
\’#\’: resolve(__dirname, \’types\’),
build: resolve(__dirname, \’build\’)
},

//引入文件的后缀名称，可以省略。如果出现同名，按照数组加载的优先顺序
extensions: [\’.mjs\’, \’.js\’, \’.ts\’, \’.jsx\’, \’.tsx\’, \’.json\’, \’.vue\’],
},

// ******打印+debugger清除配置******
// 测试环境保留打印
esbuild: {
pure: VITE_DROP_CONSOLE ? [\’console.log\’, \’debugger\’] : []
// 自定义 JSX 配置
jsxFactory: \’h\’, //自定义的 JSX 工厂函数为 h，这在一些非 React 框架中可能会用到。
jsxFragment: \’Fragment\’, //指定了 JSX 的 Fragment 为 Fragment
jsxInject: `import React from \’react\’` //是否开启 JSX 转换

css: {
// 全局变量+全局引入less+配置antdv主题色
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 全局变量使用：@primary-color
modifyVars: {
\’primary-color\’: \’#1890ff\’, // 全局主色
\’link-color\’: \’ #1890ff\’, // 链接色
\’success-color\’: \’ #52c41a\’, // 成功色
\’warning-color\’: \’ #faad14\’, // 警告色
\’error-color\’: \’ #f5222d\’, // 错误色
\’font-size-base\’: \’ 14px\’, // 主字号
\’heading-color\’: \’ rgba(0, 0, 0, 0.85)\’, // 标题色
\’text-color\’: \’ rgba(0, 0, 0, 0.65)\’, // 主文本色
\’text-color-secondary\’: \’ rgba(0, 0, 0, 0.45)\’, // 次文本色
\’disabled-color\’: \’ rgba(0, 0, 0, 0.25)\’, // 失效色
\’border-radius-base\’: \’ 2px\’, // 组件/浮层圆角
\’border-color-base\’: \’ #d9d9d9\’, // 边框色
\’box-shadow-base\’: \’ 0 2px 8px rgba(0, 0, 0, 0.15)\’ // 浮层阴影
}
}
}
}
}
})