web/vite.config.ts

129 lines
3.3 KiB
TypeScript

import Vue from "@vitejs/plugin-vue";
import VueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
import { presetIcons, presetUno } from "unocss";
import Unocss from "unocss/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers";
import AutoComponent from "unplugin-vue-components/vite";
import { defineConfig, loadEnv } from "vite";
import Page from "vite-plugin-pages";
import { arcoToUnoColor } from "./scripts/vite/color";
import iconFile from "./scripts/vite/file.json";
import iconFmt from "./scripts/vite/fmt.json";
import plugin from "./scripts/vite/plugin";
/**
* vite 配置
* @see https://cn.vitejs.dev/config/
*/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
const host = env.VITE_HOST ?? "0.0.0.0";
const port = Number(env.VITE_PORT ?? 3020);
return {
base: "./",
plugins: [
/**
* 提供 Vue 3 单文件组件支持
* @see https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
*/
Vue({
script: {
defineModel: true,
},
}),
/**
* 提供 Vue 3 JSX 支持
* @see https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx
*/
VueJsx(),
/**
* 提供vue等api的自动导入
* @see https://github.com/antfu/unplugin-auto-import#readme
*/
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [ArcoResolver()],
dts: "./src/types/auto-import.d.ts",
}),
/**
* 提供vue组件的自动导入
* @see https://github.com/antfu/unplugin-vue-components
*/
AutoComponent({
resolvers: [ArcoResolver({ sideEffect: false })],
dts: "./src/types/auto-component.d.ts",
}),
/**
* 提供基于文件系统的路由生成
* @see https://github.com/hannoeru/vite-plugin-pages
*/
Page({
exclude: ["**/components/*.vue", "**/*.*.vue"],
}),
/**
* 提供CSS和图标的按需生成
* @see https://github.com/unocss/unocss#readme
*/
Unocss({
theme: {
colors: {
brand: arcoToUnoColor("primary"),
},
},
include: ["src/**/*.{vue,ts,tsx,css,scss,sass,less,styl}"],
presets: [
presetUno(),
presetIcons({
prefix: "",
collections: {
"icon-file": iconFile,
"icon-fmt": iconFmt,
},
}),
],
}),
/**
* 项目插件,打包时注入版本信息、基于文件后缀打包等
* @see ./scripts/vite/plugin.ts
*/
plugin(),
],
resolve: {
alias: [
{
find: "@",
replacement: "/src",
},
],
},
server: {
host,
port,
proxy: {
"/upload": {
target: "http://127.0.0.1:3030",
},
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
hack: `true; @import (reference) "${resolve("src/styles/css-arco.less")}";`,
arcoblue: "#66f",
},
},
},
},
};
});