使用Vite预编译Vue3模板避免'unsafe-eval'错误的方法问询

Vite 生态默认已经实现了 Vue3 模板预编译能力，不需要额外配置类似 Vue-Loader 的预编译开关，出现 unsafe-eval 报错通常是特殊使用场景导致的，具体排查和解决方法如下：

1. 核心默认行为说明 #

@vitejs/plugin-vue 作为 Vite 官方适配 Vue3 的插件，在开发、生产构建全链路默认会对 .vue 单文件组件内的 <template> 内容做预编译，直接输出可执行的渲染函数，不需要依赖 Vue runtime 编译器，也不会触发 eval 类逻辑。

2. 常见报错原因与修复方案 #

• 场景1：项目中存在非 SFC 形式的字符串模板
  当你直接给组件的 template 配置项传入字符串、或者使用的第三方库包含动态生成的字符串模板时，这部分模板不会被 @vitejs/plugin-vue 自动识别编译，Vue 会调用 runtime 编译器生成渲染函数，而编译器内部依赖 new Function 实现，就会触发 unsafe-eval 报错。
  修复方案：

  • 优先将所有字符串模板迁移为 .vue 单文件的 <template> 写法，走默认预编译流程
  • 若必须使用字符串模板，可引入 vite-plugin-compile-vue-template 类的社区插件，配置规则对指定的字符串模板做预编译处理
  • 不推荐方案：配置 resolve.alias 将 vue 指向带编译器的完整版本，同时调整 CSP 规则放开 unsafe-eval 限制，仅可用于临时调试

• 场景2：开发环境 CSP 规则过严
  Vite 开发环境为了实现热更新、模块动态注入等能力，本身会用到 eval 相关逻辑，和 Vue 模板预编译无关。如果仅在开发环境出现报错，可单独为开发环境配置宽松的 CSP 规则，生产构建产物不会存在此类逻辑。

3. 预编译生效校验方法 #

生产构建完成后，检索打包后的 JS 产物，若不存在和 Vue 模板编译相关的 new Function、compileTemplate 关键字，即说明所有模板都已经完成预编译，不会触发 unsafe-eval 报错。

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