foundation-sunshine/vite.config.js at master · AlkaidLab/foundation-sunshine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import fs from 'fs'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { ViteEjsPlugin } from './vite-plugin-ejs-v7.js'
import vue from '@vitejs/plugin-vue'
import process from 'process'

/**
 * Before actually building the pages with Vite, we do an intermediate build step using ejs
 * Importing this separately and joining them using ejs
 * allows us to split some repeating HTML that cannot be added
 * by Vue itself (e.g. style/script loading, common meta head tags, Widgetbot)
 * The vite-plugin-ejs handles this automatically
 */
let assetsSrcPath = 'src_assets/common/assets/web'
let assetsDstPath = 'build/assets/web'

if (process.env.SUNSHINE_BUILD_HOMEBREW) {
  console.log('Building for homebrew, using default paths')
} else {
  if (process.env.SUNSHINE_SOURCE_ASSETS_DIR) {
    console.log('Using srcdir from Cmake: ' + resolve(process.env.SUNSHINE_SOURCE_ASSETS_DIR, 'common/assets/web'))
    assetsSrcPath = resolve(process.env.SUNSHINE_SOURCE_ASSETS_DIR, 'common/assets/web')
  }
  if (process.env.SUNSHINE_ASSETS_DIR) {
    console.log('Using destdir from Cmake: ' + resolve(process.env.SUNSHINE_ASSETS_DIR, 'assets/web'))
    assetsDstPath = resolve(process.env.SUNSHINE_ASSETS_DIR, 'assets/web')
  }
}

const header = fs.readFileSync(resolve(assetsSrcPath, 'template_header.html'))

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
    },
  },
  plugins: [vue(), ViteEjsPlugin({ header })],
  root: resolve(assetsSrcPath),
  preview: {
    port: 3000,
    host: '0.0.0.0',
    open: false,
  },
  build: {
    outDir: resolve(assetsDstPath),
    emptyOutDir: true,
    chunkSizeWarningLimit: 1000,
    // Vite 8 使用 rolldown 内核：多入口 HTML 必须放在 rolldownOptions.input
    // 放到 rollupOptions.input 会被忽略，导致除 index.html 外其它页面 404
    rolldownOptions: {
      input: {
        apps: resolve(assetsSrcPath, 'apps.html'),
        config: resolve(assetsSrcPath, 'config.html'),
        index: resolve(assetsSrcPath, 'index.html'),
        password: resolve(assetsSrcPath, 'password.html'),
        pin: resolve(assetsSrcPath, 'pin.html'),
        troubleshooting: resolve(assetsSrcPath, 'troubleshooting.html'),
        welcome: resolve(assetsSrcPath, 'welcome.html'),
      },
      output: {
        // 优化chunk命名
        chunkFileNames: 'assets/[name]-[hash].js',
        // 优化入口文件命名（只影响 JS 文件）
        entryFileNames: 'assets/[name]-[hash].js',
        // 优化资源文件命名
        assetFileNames: (assetInfo) => {
          const name = assetInfo.name || ''
          const ext = name.split('.').pop()

          if (/\.(css)$/.test(name)) {
            return 'assets/[name]-[hash].[ext]'
          }
          if (/\.(woff2?|eot|ttf|otf)$/.test(name)) {
            return 'assets/fonts/[name]-[hash].[ext]'
          }
          if (/\.(png|jpe?g|gif|svg|webp|avif)$/.test(name)) {
            return 'assets/images/[name]-[hash].[ext]'
          }
          return 'assets/[name]-[hash].[ext]'
        },
      },
    },
    // 启用CSS代码分割
    cssCodeSplit: true,
    // 启用源码映射（生产环境可选）
    sourcemap: false,
    // 优化依赖预构建
    commonjsOptions: {
      include: [/node_modules/],
    },
  },
  // 优化依赖预构建
  optimizeDeps: {
    include: ['vue', 'vue-i18n', 'bootstrap', '@popperjs/core', 'marked', 'nanoid', 'vuedraggable'],
  },
})