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

Question

我正在使用基于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

Answer 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 方式后，它现在可以工作了。

Answer 2

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

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

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