vite.config.ts常用配置(v4.2.0)

vite.config.ts常用配置(v4.2.0)

import { defineConfig, loadEnv } from “vite”;
import vue from “@vitejs/plugin-vue”;
import { fileURLToPath } from “node:url”;
import { resolve } from “path”;
// 自动导入vue中hook reactive ref等
import AutoImport from “unplugin-auto-import/vite”;
//自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from “unplugin-vue-components/vite”;
// element-plus自动导入
// import { ElementPlusResolver } from “unplugin-vue-components/resolvers”;
//ant-design-vue自动导入
import { AntDesignVueResolver } from “unplugin-vue-components/resolvers”;
// gzip
import viteCompression from “vite-plugin-compression”;

// https://vitejs.dev/config/
export default ({ mode }: { mode: string }) => {
process.env = { …process.env, …loadEnv(mode, “./env”, “”) };
return defineConfig({
// 插件
plugins: [
vue(),
AutoImport({
//安装两行后你会发现在组件中不用再导入ref，reactive等
imports: [“vue”, “vue-router”],
//存放的位置
dts: “src/auto-import.d.ts”,
resolvers: [AntDesignVueResolver()],
}),
Components({
// 引入组件的,包括自定义组件
// 存放的位置
dts: “src/components.d.ts”,
resolvers: [
AntDesignVueResolver({ importStyle: “less”, resolveIcons: true }),
],
}),
// gzip
viteCompression({
threshold: 10240, // 超过10kb压缩
}),
],
build: {
minify: “terser”,
terserOptions: {
compress: {
// 生产环境移除console
drop_console: true,
drop_debugger: true,
},
},
},
// 快速别名
resolve: {
alias: {
“@”: fileURLToPath(new URL(“./src”, import.meta.url)),
},
},
css: {
devSourcemap: false,
preprocessorOptions: {
less: {
modifyVars: {
// 在这里自定义主题色等样式(antd)
“primary-color”: “#53b4b3”,
“link-color”: “#53b4b3”,
“border-radius-base”: “2px”,
},
javascriptEnabled: true,
},
},
},
server: {
// 代理配置
proxy: {
“^/api”: {
target: process.env.PROXY_URL,
rewrite: (path) => path.replace(“/api”, “”),
changeOrigin: true,
},
},
},
});
};