VueJS与Vite构建报错：Unexpected character '�'，求助解决

问题分析 #

报错[commonjs--resolver] Unexpected character '�'是因为Vite尝试解析fsevents.node二进制文件，而Vite默认不支持处理这类非JS文件。fsevents是仅用于MacOS的文件系统监听依赖，属于可选依赖，你没显式安装的情况下，大概率是rollup、Vite这类核心工具的子依赖。

排查与解决步骤 #

1. 定位fsevents的依赖来源 #

执行命令查看完整依赖链，确认是哪个包引入了fsevents：

npm explain fsevents

2. 配置Vite跳过fsevents解析 #

在vite.config.js中添加配置，避免Vite处理这个可选依赖：

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

export default defineConfig({
  plugins: [vue(), vuetify()],
  optimizeDeps: {
    // 排除fsevents被预构建
    exclude: ['fsevents']
  },
  resolve: {
    // 非MacOS环境下，将fsevents指向空模块
    alias: process.platform !== 'darwin' ? {
      'fsevents': 'empty-module'
    } : {}
  }
})

如果提示缺少empty-module，先执行npm install empty-module --save-dev。

3. 排查可疑插件 #

你安装了vite-plugin-native，这个插件用于处理Node.js原生模块，若项目不需要处理native模块，可先移除它测试：

npm uninstall vite-plugin-native

4. 清理依赖缓存 #

删除旧依赖和缓存文件后重新安装，可能解决缓存导致的可选依赖错误加载问题：

rm -rf node_modules package-lock.json
npm install

5. 检查运行环境配置 #

如果是Windows/Linux环境，fsevents本应是可选依赖不会被启用。检查是否有依赖强制引入了它，或是npm配置中强制安装了可选依赖（比如使用过--force或--include-optional参数）。

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