// 导入环境变量处理库 import dotenv from 'dotenv' // 导入 Node.js 进程模块 import process from 'node:process' // 导入预加载工具函数 import preload from './app/utils/preload' // 导入国际化语言配置 import { currentLocales } from './i18n/i18n' // 设置环境变量文件路径,默认使用 .env.test const envFile = process.env.ENV_FILE || '.env.test' // 加载环境变量配置 dotenv.config({ path: `./env/${envFile}` }) // 过滤出以 NUXT_PUBLIC_ 开头的环境变量作为公共配置 const publicConfig = Object.entries(process.env) .filter(([key]) => key.startsWith('NUXT_PUBLIC_')) .reduce((config, [key, value]) => { config[key] = value return config }, {}) export default defineNuxtConfig({ // 注册 Nuxt 模块 modules: [ '@nuxt/image', // 图片优化模块 '@vant/nuxt', // Vant UI 组件库 '@unocss/nuxt', // 原子化 CSS 框架 '@nuxtjs/i18n', // 国际化模块 ], // 运行时配置 runtimeConfig: { // 私有配置,只在服务端可用 apiSecret: process.env.NUXT_API_SECRET || 'default_secret', // 公共配置,客户端和服务端都可用 public: publicConfig, }, // CSS 配置 css: [ '@unocss/reset/tailwind.css', // 重置默认样式 '@/static/styles/default-theme.css', ], // PostCSS 配置 postcss: { plugins: { 'autoprefixer': {}, // 自动添加 CSS 前缀 // 移动端适配插件配置 'postcss-mobile-forever': { appSelector: '#__nuxt', // 根选择器 viewportWidth: 375, // 设计稿宽度 maxDisplayWidth: 600, // 最大显示宽度 exclude: /@nuxt/, // 排除的文件 border: true, // 显示边框 rootContainingBlockSelectorList: [ 'van-tabbar', 'van-popup', ], }, }, }, // 国际化配置 i18n: { locales: currentLocales, // 支持的语言列表 lazy: true, // 懒加载语言包 strategy: 'no_prefix', // URL 策略:不添加语言前缀 detectBrowserLanguage: { useCookie: true, // 使用 cookie 存储语言选择 cookieKey: 'i18n_redirected', // cookie 键名 redirectOn: 'root', // 仅在根路径重定向 alwaysRedirect: true, // 总是重定向 fallbackLocale: 'zh-CN' // 默认语言 }, langDir: 'locales', // 语言文件目录 defaultLocale: 'zh-CN', // 默认语言 vueI18n: './i18n/i18n.config.ts', // Vue I18n 配置文件 }, // 应用配置 app: { // 布局过渡动画 layoutTransition: { name: 'layout', mode: 'out-in' }, // 头部配置 head: { // 视口配置 viewport: 'width=device-width,initial-scale=1,viewport-fit=cover', // 链接配置 link: [ { rel: 'icon', href: '/favicon.ico', sizes: 'any' }, // 网站图标 { rel: 'preload', as: 'style', href: '/critical.css' }, // 预加载关键 CSS { rel: 'preconnect', href: '你的API域名' }, // 预连接 API 域名 { rel: 'dns-prefetch', href: '你的API域名' }, // DNS 预解析 ], // Meta 标签配置 meta: [ { name: 'apple-mobile-web-app-capable', content: 'yes' }, // iOS 应用模式 { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }, // iOS 状态栏样式 { name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' }, // 浅色主题色 { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' }, // 深色主题色 { name: 'description', content: '你的网站描述' }, // SEO 描述 { 'http-equiv': 'x-dns-prefetch-control', content: 'on' }, // DNS 预解析控制 ], // 脚本配置 script: [ { innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' }, // 预加载脚本 // 性能监控脚本 { innerHTML: ` window.performance.mark('app-start'); new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('FCP:', entry.startTime); } }).observe({entryTypes: ['paint']}); `, type: 'text/javascript', tagPosition: 'head' } ], }, }, // Vite 构建配置 vite: { build: { target: 'esnext', // 构建目标 // Rollup 配置 rollupOptions: { output: { manualChunks: { 'vant': ['vant'], // Vant 单独打包 'vendor': ['vue', 'vue-router'] // 核心库单独打包 } } }, minify: 'terser', // 使用 terser 压缩 terserOptions: { compress: { drop_console: true, // 移除 console drop_debugger: true // 移除 debugger } } }, // 依赖优化配置 optimizeDeps: { include: [ '@intlify/core-base', // I18n 核心 '@intlify/shared', // I18n 共享库 'is-https', // HTTPS 检测 'vant', // Vant UI '@vant/use', // Vant Hooks '@vueuse/core', // VueUse 工具集 ], }, }, // 实验性功能 experimental: { typedPages: true, // 启用页面类型 }, // 开发工具 devtools: { enabled: true, // 启用开发工具 }, // TypeScript 配置 typescript: { shim: false, // 禁用 shim }, // 功能特性配置 features: { inlineStyles: false, // 禁用内联样式 }, // 未来特性配置 future: { compatibilityVersion: 4, // 兼容性版本 }, // Nuxt 兼容性日期 compatibilityDate: '2025-01-09', // 确保未来版本兼容性 // 开发服务器配置 devServer: { host: '0.0.0.0', // 主机地址 port: 3000, // 端口号 }, // 图片优化配置 image: { provider: 'ipx', // 图片处理提供者 // 响应式断点 screens: { xs: 320, // 超小屏幕 sm: 640, // 小屏幕 md: 768, // 中等屏幕 lg: 1024, // 大屏幕 xl: 1280, // 超大屏幕 xxl: 1536, // 特大屏幕 }, quality: 80, // 图片质量 format: ['webp', 'jpg'], // 支持的格式 placeholder: true, // 启用占位图 blur: 3 // 模糊加载效果 } })