Vue+Vite项目配置CSP时避免unsafe-eval的解决方案咨询

你的问题核心是：虽然用Vite构建的项目默认使用Vue的runtime-only版本，但实际代码中仍存在运行时编译逻辑（也就是报错代码里的compileToFunction和new Function），这违反了CSP中script-src 'self'的限制，不需要添加unsafe-eval就能解决，具体步骤如下：

1. 彻底移除运行时编译的触发场景 #

运行时编译通常由以下写法触发，逐一排查并修改：

• 不要在组件中使用template选项定义字符串模板（比如Vue.extend({ template: '<div>...</div>' })），全部改用单文件组件（.vue文件），Vite会在构建阶段预编译这些模板为渲染函数。
• 动态创建组件时，直接使用h()（createVNode）编写渲染函数，避免传入字符串模板。

2. 配置Vite强制锁定runtime-only版本 #

在vite.config.js中明确配置Vue插件，确保打包产物不包含Vue编译器：

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        // 禁用运行时编译相关配置，确保只打包runtime-only代码
        compilerOptions: {}
      }
    })
  ]
})

同时检查package.json的依赖，确保没有引入带编译器的Vue完整版（比如vue/dist/vue.esm-bundler.js），保持依赖为默认的vue即可。

3. 排查第三方依赖的问题 #

如果项目中使用了第三方Vue组件库，部分库可能内部使用了运行时编译，导致产物中残留new Function代码：

• 替换为支持runtime-only模式的组件库；
• 若无法替换，可尝试查看该库的文档，是否有禁用运行时编译的配置项。

4. 验证修复结果 #

重新构建项目后，检查生成的index.HASH.js，确认其中不再包含compileToFunction和new Function相关代码，此时设置CSP的script-src 'self'就不会再触发报错。

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