import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; import Compression from 'vite-plugin-compression'; import Components from 'unplugin-vue-components/vite'; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; import { EleAdminResolver } from 'ele-admin-plus/es/utils/resolvers'; // 1. 导入 VitePWA 插件 import { VitePWA } from 'vite-plugin-pwa' export default defineConfig(({ command }) => { const isBuild = command === 'build'; const alias = { '@/': resolve('src') + '/', 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' }; const plugins = [ vue(), VitePWA({ injectRegister: 'auto', devOptions: { enabled: process.env.NODE_ENV === 'development', // 开发模式也启用 type: 'module' // 现代浏览器支持 }, includeAssets: ['favicon.ico', 'robots.txt'], strategies: 'injectManifest', // 使用自定义SW模式 srcDir: 'public', filename: 'sw.js', // 你的自定义SW文件名 // 核心配置项 registerType: 'autoUpdate', // 更新策略:autoUpdate(自动) 或 prompt(手动) workbox: { cleanupOutdatedCaches: true, maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB sourcemap: true, // Workbox 配置 globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2}'], skipWaiting: true, // 新SW立即接管控制 clientsClaim: true, // 立即控制现有客户端 navigateFallback: '/index.html', // SPA 回退路由 }, // 应用清单配置 manifest: { name: '我的应用', short_name: '应用', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#42b883', icons: [ { src: 'icon-192.png', sizes: '192x192', type: 'image/png' }, { src: 'icon-512.png', sizes: '512x512', type: 'image/png' } ] } }) ]; if (isBuild) { // 组件按需引入 plugins.push( Components({ dts: false, resolvers: [ ElementPlusResolver({ importStyle: 'sass' }), EleAdminResolver({ importStyle: 'sass' }) ] }) ); // gzip压缩 plugins.push( Compression({ disable: !isBuild, threshold: 10240, algorithm: 'gzip', ext: '.gz' }) ); } else { // 开发环境全局安装 alias['./as-needed'] = './global-import'; } return { base: '', resolve: { alias }, plugins, server: { allowedHosts: ['a.tcp.run'] }, css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/variables.scss" as *;` } } }, optimizeDeps: { include: [ 'echarts/core', 'echarts/charts', 'echarts/renderers', 'echarts/components', 'vue-echarts', 'echarts-wordcloud', 'sortablejs', 'vuedraggable' ] }, build: { target: 'chrome63', chunkSizeWarningLimit: 4000 } }; });