Vite+Vue3+TS项目报错Uncaught ReferenceError: require is not defined求助

你遇到的错误是因为当前Vite构建输出的是**CommonJS(CJS)**格式代码，而浏览器环境原生不支持require函数，因此抛出了这个引用错误。

解决方案1：修改构建输出格式为浏览器兼容的UMD/ES格式 #

修改vite.config.ts中build.lib.formats配置，将CJS替换为浏览器支持的UMD或ES格式：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'
import VueI18nPlugin from '@intlify/vite-plugin-vue-i18n'
import dts from 'vite-plugin-dts';

export default defineConfig({
    build:{
        emptyOutDir:true,
        lib:{
            entry:resolve(__dirname, 'src/index.ts'),
            name:'app',
            fileName:'app',
            formats: ['umd'], // 替换为umd或es格式
        },
        rollupOptions:{
            external:['vue']
        },
        outDir:'../../public/static/js',
    },
    plugins: [
        vue()
    ],
})

• UMD格式：兼容浏览器和Node环境，构建后可通过你配置的name: 'app'全局变量访问应用。
• ES格式：现代浏览器原生支持的ES模块，需要通过<script type="module">标签引入。

解决方案2：将Vue打包进产物（无需外部依赖Vue） #

如果你希望构建后的文件包含Vue，不需要外部引入，可移除rollupOptions.external中的vue配置：

rollupOptions:{
    // 移除external:['vue']，让Rollup把Vue打包进产物
}

这样构建后的代码不会依赖外部的require('vue')，浏览器可直接运行。

验证修改 #

重新执行npm run build，将构建后的文件引入浏览器页面，错误即可消失。

内容的提问来源于stack exchange，提问作者LyricSong