Vite 配置：添加 resolve 属性以解析模块

在这段代码中加入 resolve 配置，可以通过在 defineConfig 的对象中添加 resolve 属性实现。resolve 属性是一个对象，包含了各种解析模块的配置，例如 alias（别名）、extensions（扩展名数组）等。

示例代码：

import { defineConfig, type PluginOption, splitVendorChunkPlugin, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import { insertHtml, h } from 'vite-plugin-insert-html'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import compress from 'vite-plugin-compression'

export default defineConfig((context) => {

  const mode = context.mode
  const envDir = 'env' // 环境变量文件的文件夹，相对于项目的路径，也可以用 nodejs 函数拼接绝对路径
  const isProd = mode === 'production'
  
  const env = loadEnv(mode, envDir)
  const cesiumBaseUrl = env['VITE_CESIUM_BASE_URL']
  // 默认 base 是 '/'
  const base = '/'

  const plugins: PluginOption[] = [

    vue(),
    splitVendorChunkPlugin(),

    viteExternalsPlugin({
      cesium: 'Cesium', // 外部化 cesium 依赖，之后全局访问形式是 window['Cesium']
    }),
    
    insertHtml({
      head: [
        // 生产模式使用 CDN 或已部署的 CesiumJS 在线库链接，开发模式用拷贝的库文件，根据 VITE_CESIUM_BASE_URL 自动拼接
        h('script', {
          // 因为涉及前端路径访问，所以开发模式最好显式拼接 base 路径，适配不同 base 路径的情况
          src: isProd ? `${cesiumBaseUrl}Cesium.js` : `${base}${cesiumBaseUrl}Cesium.js`
        })
      ]
    })

  ]
  if (!isProd) {
    // 开发模式，复制 node_modules 下的 cesium 依赖
    const cesiumLibraryRoot = 'node_modules/cesium/Build/CesiumUnminified/'
    const cesiumLibraryCopyToRootPath = 'libs/cesium/' // 相对于打包后的路径
    const cesiumStaticSourceCopyOptions = ['Assets', 'ThirdParty', 'Workers', 'Widgets'].map((dirName) => {
      return {
        src: `${cesiumLibraryRoot}${dirName}/*`, // 注意后面的 * 字符，文件夹全量复制
        dest: `${cesiumLibraryCopyToRootPath}${dirName}`
      }
    })
    plugins.push(
      viteStaticCopy({
        targets: [
          // 主库文件，开发时选用非压缩版的 IIFE 格式主库文件
          {
            src: `${cesiumLibraryRoot}Cesium.js`,
            dest: cesiumLibraryCopyToRootPath
          },
          // 四大静态文件夹
          ...cesiumStaticSourceCopyOptions
        ]
      }),
    )
  }
  plugins.push(compress({
    threshold: 10 * 1024 // 10KB 以下不压缩
  }))

  return {
    base,
    envDir,
    mode,
    plugins,
    resolve: {
      alias: {
        // 配置别名
        '@': path.resolve(__dirname, 'src'),
      },
      extensions: ['.js', '.ts', '.vue', '.json'], // 配置扩展名数组
    },
  }
})

上述代码中，我们在 resolve 属性中添加了 alias 和 extensions 两个配置：

• alias 用于配置别名，例如 '@': path.resolve(__dirname, 'src') 表示将 @ 别名指向项目根目录下的 src 文件夹。
• extensions 用于配置需要解析的扩展名数组，例如 '.js', '.ts', '.vue', '.json' 表示会自动解析这些扩展名的文件。

通过添加 resolve 配置，我们可以更方便地组织和管理项目代码，提高代码的可读性和可维护性。