grandCanal/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'

const PUBLIC_URL_PREFIXES = ['images/', 'CanalPage/', 'SymbiosisPage/']
const PUBLIC_URL_RE = new RegExp(
  `url\\(\\s*(['"]?)\\.\\/(${PUBLIC_URL_PREFIXES.join('|')})([^'")]+)\\1\\s*\\)`,
  'g',
)

/** 让 CSS 里的 ./public 路径不要被 Vite 当模块解析，构建后再写成相对 CSS 文件的路径 */
function preservePublicCssUrls() {
  return {
    name: 'preserve-public-css-urls',
    enforce: 'pre',
    transform(code, id) {
      if (!/\.(vue|css|scss)($|\?)/.test(id) || !code.includes('url(')) return
      const next = code.replace(
        PUBLIC_URL_RE,
        (_m, quote, folder, rest) => `url(${quote}/${folder}${rest}${quote})`,
      )
      if (next !== code) return { code: next, map: null }
    },
    generateBundle(_opts, bundle) {
      const replacements = [
        ['url(/images/', 'url(../images/'],
        ["url('/images/", "url('../images/"],
        ['url("/images/', 'url("../images/'],
        ['url(/CanalPage/', 'url(../CanalPage/'],
        ["url('/CanalPage/", "url('../CanalPage/"],
        ['url("/CanalPage/', 'url("../CanalPage/'],
        ['url(/SymbiosisPage/', 'url(../SymbiosisPage/'],
        ["url('/SymbiosisPage/", "url('../SymbiosisPage/"],
        ['url("/SymbiosisPage/', 'url("../SymbiosisPage/'],
      ]
      for (const item of Object.values(bundle)) {
        if (item.type !== 'asset' || !item.fileName.endsWith('.css')) continue
        let source = String(item.source)
        for (const [from, to] of replacements) source = source.split(from).join(to)
        item.source = source
      }
    },
  }
}

export default defineConfig({
  base: './',
  plugins: [
    preservePublicCssUrls(),
    vue({
      template: {
        transformAssetUrls: {
          includeAbsolute: false,
          tags: {},
        },
      },
    }),
    WindiCSS(),
  ],
  css: {
    postcss: './postcss.config.js',
    preprocessorOptions: {
      scss: { api: 'modern-compiler' },
    },
  },
  server: {
    port: 3000,
    open: true,
  },
})