import { defineConfig, loadEnv } from "vite"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import { resolve } from "path"; import { VitePWA } from "vite-plugin-pwa"; import vue from "@vitejs/plugin-vue"; import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import viteCompression from "vite-plugin-compression"; // https://vitejs.dev/config/ export default ({ mode }) => defineConfig({ plugins: [ vue(), AutoImport({ imports: ["vue"], resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), VitePWA({ registerType: "autoUpdate", workbox: { skipWaiting: true, clientsClaim: true, runtimeCaching: [ { urlPattern: /(.*?)\.(js|css|woff2|woff|ttf)/, // js / css 静态资源缓存 handler: "CacheFirst", options: { cacheName: "js-css-cache", }, }, { urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存 handler: "CacheFirst", options: { cacheName: "image-cache", }, }, ], }, manifest: { name: loadEnv(mode, process.cwd()).VITE_SITE_NAME, short_name: loadEnv(mode, process.cwd()).VITE_SITE_NAME, description: loadEnv(mode, process.cwd()).VITE_SITE_DES, display: "standalone", start_url: "/", theme_color: "#424242", background_color: "#424242", icons: [ { src: "/images/icon/48.png", sizes: "48x48", type: "image/png", }, { src: "/images/icon/72.png", sizes: "72x72", type: "image/png", }, { src: "/images/icon/96.png", sizes: "96x96", type: "image/png", }, { src: "/images/icon/128.png", sizes: "128x128", type: "image/png", }, { src: "/images/icon/144.png", sizes: "144x144", type: "image/png", }, { src: "/images/icon/192.png", sizes: "192x192", type: "image/png", }, { src: "/images/icon/512.png", sizes: "512x512", type: "image/png", }, ], }, }), viteCompression(), ], server: { port: "3000", open: true, }, resolve: { alias: [ { find: "@", replacement: resolve(__dirname, "src"), }, ], }, css: { preprocessorOptions: { scss: { charset: false, additionalData: `@import "./src/style/global.scss";`, }, }, }, build: { minify: "terser", terserOptions: { compress: { pure_funcs: ["console.log"], }, }, }, });