由于 unsafe-eval，Vue.js 3 扩展在使用“vue-cli-service build”时中断

Posted 2023-02-22

【中文标题】由于 unsafe-eval，Vue.js 3 扩展在使用“vue-cli-service build”时中断

【英文标题】：Vue.js 3 extension breaks while using "vue-cli-service build" due to unsafe-eval

【发布时间】：2021-01-17 10:42:38

【问题描述】：

我正在使用基于Kocal's project 的vue 3、vue-router 和vuex 开发一个chrome 扩展，它在底层使用vue-cli。我尽可能使用单一文件组件，并广泛使用 vue 绑定。 在开发模式下一切正常，但我最近尝试为生产构建应用程序，但遇到了这个错误部分渲染：

chunk-vendors.f6de00a6.js:11 EvalError: Refused to evaluate a string as javascript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

经过几天的挖掘，我的理解是 webpack 或 vue 编译系统通过 eval 脚本引用/注入代码来搞乱 CSP。由于我对此还很陌生，所以我很难通过阅读来区分我能做什么。

我尝试了不同的方法：

为运行时定义 $vue 别名仅在 vue.config.js 中构建（假设通过在运行前编译代码但以新错误结束：Uncaught TypeError: Object(...) is not a function for o=Object(n["withScopeId"])("data-v-21ae70c6"); 来删除不安全的 eval） 在根目录下使用render() 函数 将"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 添加到manifest.json 将组件切换到 render() 以查看我是否有更好的机会进行部分渲染，但最终没有显示任何内容，尽管正在执行来自渲染的 console.log。 在 vue.config 上向chainWebpack 拆分清单和内联清单添加配置

让我感到困惑的是，我无法摆脱unsafe-eval，充其量只是部分显示，最坏的是空白页。无论如何，绑定似乎都被取消了，使用路由器链接更改页面将给出一个空白页面。

编辑：从 webpack 挖掘编译代码并将最小化选项设置为 false 后，错误似乎来自供应商：vue-i18n

【参考方案1】：

tl;dr：检查您的依赖项/包，包括您认为他们不会使用的那些 unsafe-eval。

在深入研究了为 vue3 构建的 webpack 内部结构和组件之后，以下是要点：

使用单个文件组件和默认的 vue-cli 配置是可以的，因为它确实只需要 vue 运行时，所以没有未经请求的unsafe-eval webpack 配置如下：

  module.exports = 
    configureWebpack: 
      plugins: [
        new webpack.DefinePlugin(
          global: "window" // Placeholder for global used in any node_modules
        )
      ]
    ,
    ...
  ;
// Note that this plugin definition would break if you are using "unit-mocha" module for vue-cli

最后，问题是我用于 i18n vue-i18n@next 的依赖项，在删除它并切换到 chrome 的 i18n 方式后，它现在可以工作了。

【参考方案2】：

eval 可能来自 Webpack，原因是全局范围界定问题。 更多详情见链接https://mathiasbynens.be/notes/globalthis

您可以尝试将此配置添加到vue.config.js

module.exports = 
  configureWebpack: 
    node: 
      global: false
    ,
    plugins: [
      new webpack.DefinePlugin(
        global: "window"
      )
    ]
  
;

【讨论】：

感谢您的建议。我在某处看到了 node: false config 但还没有尝试过。我将您的建议添加到我的 vue.config.js 中，但同样的问题仍然存在（部分渲染出现 eval 错误）

我一直在测试和测试，我至少有部分渲染的事实似乎表明 webpack 至少正确完成了部分编译。如果我要将 vue$ 别名更改为仅运行时构建，我确实有完整的空白屏幕。我认为问题可能出在其他地方。

?如果仅运行时的 Vue 导致空白，这似乎表明模板没有被编译，但从 repo 看不出发生这种情况的原因。

很正常，vue-cli使用webpack预编译.vue，我给他运行时只给了vue.js这个预编译。它可能不会提供太多，但至少会编译部分 .vue 文件。