有时候做一些简单的前端小工具，需要本地直接打开。使用 Vite 创建的项目默认不支持直接打开，记录一下解决方式。

修改构建产物

首先要在 vite 配置文件后配置 base: './'

此外，还要修改打包后的文件：

• script 有 type="module" crossorigin，把它们改为 defer 。
• link 有 rel="stylesheet" crossorigin ，把 crossorigin 移除掉。

可以编写 node.js 脚本，或者自定义一个 vite 插件，把它们批量替换：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

const removeModuleAndCrossorigin = () => {
  return {
    name: "remove-module-and-crossorigin",
    transformIndexHtml(html: string) {
      return html
        .replaceAll('type="module" ', "defer ")
        .replaceAll('crossorigin ', "")
    }
  }
}

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [react(), removeModuleAndCrossorigin()],
})

如果用到了 import 图片获取图片地址，还会报 Cannot use 'import.meta' outside a module ，避免这种方式引用。

打包为一个文件

通过 vite-plugin-singlefile 这个工具，可以把所有代码打包到一个 html 文件里。这样会使体积变大，但更适合线下分发。

https://www.npmjs.com/package/vite-plugin-singlefile

vite.config.ts 中配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

import { viteSingleFile } from "vite-plugin-singlefile"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), viteSingleFile()],
})