Vue 2 CLI构建CSP合规问题：new Function引发unsafe-eval报错

核心原因定位 #

报错来自vendor.js中的new Function代码，说明问题并非Vue运行时本身，而是第三方依赖或构建配置生成了违反CSP的代码。

具体解决方案 #

1. 定位违规的第三方依赖 #

使用webpack包分析工具找出vendor.js中包含new Function的具体依赖：

• 安装分析工具：

  npm install webpack-bundle-analyzer --save-dev
  

• 在vue.config.js中添加配置：

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  module.exports = {
    configureWebpack: {
      plugins: [new BundleAnalyzerPlugin()]
    }
  }
  

• 执行npm run build，在浏览器打开自动弹出的分析页面，定位到包含违规代码的依赖包。
• 处理方式：优先替换为CSP合规的替代库，若无法替换则查看该库是否提供了CSP兼容版本。

2. 调整Vue CLI构建配置，禁用eval相关特性 #

• 确保生产环境不使用eval类型的sourcemap：

  module.exports = {
    productionSourceMap: false,
    configureWebpack: {
      devtool: 'source-map' // 明确指定非eval类的sourcemap类型
    }
  }
  

• 禁止运行时编译模板：所有组件必须使用render函数，避免在运行时传入template字符串（比如Vue.component('xxx', { template: '<div>...</div>' })或new Vue({ template: '...' })）。单文件组件的<template>会在构建阶段编译为render函数，属于合规范畴。

3. 检查TypeScript配置 #

若项目使用TypeScript，排查tsconfig.json中可能生成动态代码的配置：

• 确保compilerOptions中无风险配置：

  {
    "compilerOptions": {
      "strict": true,
      "noEmitOnError": true,
      "skipLibCheck": true
    }
  }
  

• 检查是否使用了vue-class-component等装饰器库，确认其版本是否兼容CSP，必要时升级或替换。

4. 手动修改依赖代码（应急方案） #

若无法替换依赖，可通过webpack插件修改违规代码（风险较高，需充分测试）：

• 安装字符串替换工具：

  npm install string-replace-loader --save-dev
  

• 在vue.config.js中添加规则替换new Function：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /[违规依赖的文件名]\.js$/,
            loader: 'string-replace-loader',
            options: {
              search: 'new Function\\((.*?)\\)',
              replace: 'function($1)', // 根据依赖实际逻辑替换为合规实现
              flags: 'g'
            }
          }
        ]
      }
    }
  }
  

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