145 lines
4.6 KiB
TypeScript
145 lines
4.6 KiB
TypeScript
import { resolve } from "path";
|
||
import { PluginOption } from "vite";
|
||
import { VitePWA } from "vite-plugin-pwa";
|
||
import { visualizer } from "rollup-plugin-visualizer";
|
||
import { createHtmlPlugin } from "vite-plugin-html";
|
||
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
|
||
import vue from "@vitejs/plugin-vue";
|
||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||
import eslintPlugin from "vite-plugin-eslint";
|
||
import viteCompression from "vite-plugin-compression";
|
||
import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
|
||
// 自动导入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
|
||
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
|
||
// 导入图标
|
||
import Icons from "unplugin-icons/vite";
|
||
import IconsResolver from "unplugin-icons/resolver";
|
||
|
||
/**
|
||
* 创建 vite 插件
|
||
* @param viteEnv
|
||
*/
|
||
export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
|
||
const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
|
||
return [
|
||
vue(),
|
||
// vue 可以使用 jsx/tsx 语法
|
||
vueJsx(),
|
||
// esLint 报错信息显示在浏览器界面上
|
||
eslintPlugin(),
|
||
// name 可以写在 script 标签上
|
||
vueSetupExtend({}),
|
||
// 创建打包压缩配置
|
||
createCompression(viteEnv),
|
||
// 注入变量到 html 文件
|
||
createHtmlPlugin({
|
||
inject: {
|
||
data: { title: VITE_GLOB_APP_TITLE }
|
||
}
|
||
}),
|
||
// 使用 svg 图标
|
||
createSvgIconsPlugin({
|
||
iconDirs: [resolve(process.cwd(), "src/assets/icons")],
|
||
symbolId: "icon-[dir]-[name]"
|
||
}),
|
||
// element按需导入
|
||
AutoImport({
|
||
// 安装两行后你会发现在组件中不用再导入ref，reactive等
|
||
imports: ["vue", "vue-router"],
|
||
dts: "src/auto-import.d.ts",
|
||
// element
|
||
resolvers: [
|
||
ElementPlusResolver({ importStyle: "sass" }),
|
||
IconsResolver({
|
||
prefix: "Icon"
|
||
})
|
||
]
|
||
}),
|
||
Components({
|
||
// element
|
||
resolvers: [
|
||
ElementPlusResolver({ importStyle: "sass" }),
|
||
IconsResolver({
|
||
enabledCollections: ["ep"]
|
||
})
|
||
],
|
||
// 默认存放位置
|
||
dts: "src/components.d.ts"
|
||
}),
|
||
Icons({
|
||
autoInstall: true
|
||
}),
|
||
// vitePWA
|
||
VITE_PWA && createVitePwa(viteEnv),
|
||
// 是否生成包预览，分析依赖包大小做优化处理
|
||
VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
|
||
];
|
||
};
|
||
|
||
/**
|
||
* @description 根据 compress 配置，生成不同的压缩规则
|
||
* @param viteEnv
|
||
*/
|
||
const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
|
||
const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
|
||
const compressList = VITE_BUILD_COMPRESS.split(",");
|
||
const plugins: PluginOption[] = [];
|
||
if (compressList.includes("gzip")) {
|
||
plugins.push(
|
||
viteCompression({
|
||
ext: ".gz",
|
||
algorithm: "gzip",
|
||
deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
|
||
})
|
||
);
|
||
}
|
||
if (compressList.includes("brotli")) {
|
||
plugins.push(
|
||
viteCompression({
|
||
ext: ".br",
|
||
algorithm: "brotliCompress",
|
||
deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
|
||
})
|
||
);
|
||
}
|
||
return plugins;
|
||
};
|
||
|
||
/**
|
||
* @description VitePwa
|
||
* @param viteEnv
|
||
*/
|
||
const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
|
||
const { VITE_GLOB_APP_TITLE } = viteEnv;
|
||
return VitePWA({
|
||
registerType: "autoUpdate",
|
||
manifest: {
|
||
name: VITE_GLOB_APP_TITLE,
|
||
short_name: VITE_GLOB_APP_TITLE,
|
||
theme_color: "#ffffff",
|
||
icons: [
|
||
{
|
||
src: "/logo.png",
|
||
sizes: "192x192",
|
||
type: "image/png"
|
||
},
|
||
{
|
||
src: "/logo.png",
|
||
sizes: "512x512",
|
||
type: "image/png"
|
||
},
|
||
{
|
||
src: "/logo.png",
|
||
sizes: "512x512",
|
||
type: "image/png",
|
||
purpose: "any maskable"
|
||
}
|
||
]
|
||
}
|
||
});
|
||
};
|