106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import vue from "@vitejs/plugin-vue";
|
||
|
||
import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";
|
||
|
||
import AutoImport from "unplugin-auto-import/vite";
|
||
import Components from "unplugin-vue-components/vite";
|
||
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
|
||
|
||
import Icons from "unplugin-icons/vite";
|
||
import IconsResolver from "unplugin-icons/resolver";
|
||
|
||
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
|
||
|
||
import UnoCSS from "unocss/vite";
|
||
|
||
import path from "path";
|
||
const pathSrc = path.resolve(__dirname, "src");
|
||
|
||
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||
const env = loadEnv(mode, process.cwd());
|
||
return {
|
||
resolve: {
|
||
alias: {
|
||
"@": pathSrc,
|
||
},
|
||
},
|
||
css: {
|
||
// CSS 预处理器
|
||
preprocessorOptions: {
|
||
//define global scss variable
|
||
scss: {
|
||
javascriptEnabled: true,
|
||
additionalData: `
|
||
@use "@/styles/variables.scss" as *;
|
||
`,
|
||
},
|
||
},
|
||
},
|
||
server: {
|
||
host: "0.0.0.0",
|
||
port: Number(env.VITE_APP_PORT),
|
||
open: true, // 运行是否自动打开浏览器
|
||
// 反向代理解决跨域
|
||
proxy: {
|
||
[env.VITE_APP_BASE_API]: {
|
||
// 线上接口API地址
|
||
target: "http://vapi.youlai.tech",
|
||
// 本地接口API地址
|
||
// target: 'http://localhost:8989',
|
||
changeOrigin: true,
|
||
rewrite: (path) =>
|
||
// localhost:3000/dev-api/users/me → http://vapi.youlai.tech/users/me
|
||
path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
vue(),
|
||
UnoCSS({
|
||
/* options */
|
||
}),
|
||
AutoImport({
|
||
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
|
||
imports: ["vue", "@vueuse/core"],
|
||
eslintrc: {
|
||
enabled: false, // Default `false`
|
||
filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
|
||
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
|
||
},
|
||
resolvers: [
|
||
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
|
||
ElementPlusResolver(),
|
||
// 自动导入图标组件
|
||
IconsResolver({}),
|
||
],
|
||
vueTemplate: true, // 是否在 vue 模板中自动导入
|
||
dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 自动导入组件类型声明文件位置，默认根目录; false 关闭自动生成
|
||
}),
|
||
|
||
Components({
|
||
resolvers: [
|
||
// 自动注册图标组件
|
||
IconsResolver({
|
||
enabledCollections: ["ep"], //@iconify-json/ep 是 Element Plus 的图标库
|
||
}),
|
||
// 自动导入 Element Plus 组件
|
||
ElementPlusResolver(),
|
||
],
|
||
dts: path.resolve(pathSrc, "types", "components.d.ts"), // 自动导入组件类型声明文件位置，默认根目录; false 关闭自动生成
|
||
}),
|
||
|
||
Icons({
|
||
// 自动安装图标库
|
||
autoInstall: true,
|
||
}),
|
||
|
||
createSvgIconsPlugin({
|
||
// 指定需要缓存的图标文件夹
|
||
iconDirs: [path.resolve(pathSrc, "assets/icons")],
|
||
// 指定symbolId格式
|
||
symbolId: "icon-[dir]-[name]",
|
||
}),
|
||
],
|
||
};
|
||
});
|