Vue.js 由于不安全评估，使用 "vue-cli-service build" 时有 3 个扩展中断

Question

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

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 脚本通过 referring/injecting 代码搞乱了 CSP。由于我对此还很陌生，所以我很难通过阅读来区分我能做什么。

我尝试了不同的方法：

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

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

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

Answer 1

由于全局范围问题，eval 可能来自 Webpack。
有关详细信息，请参阅 link https://mathiasbynens.be/notes/globalthis

能否尝试将此配置添加到 vue.config.js

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

Answer 2

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

在深入研究了 webpack 内部结构和为 vue3 构建组件之后，这里有一些要点：

使用单个文件组件和默认的 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 方式后，它现在可以工作了。

Vue.js 由于不安全评估，使用 "vue-cli-service build" 时有 3 个扩展中断

Vue.js 3 extension breaks while using "vue-cli-service build" due to unsafe-eval

google-chrome-extension

webpack

vue.js

vue-cli

vuejs3