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

Question

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

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 脚本引用/注入(inject)代码来扰乱 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 上添加一个配置到 chainWebpack 拆分 list 和内联 list

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

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

Answer 1

由于全局作用域问题，eval 可能来自 Webpack。
有关详细信息，请参阅链接 https://mathiasbynens.be/notes/globalthis

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

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