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

ko0stik

我基于开发使用VUE 3，VUE路由器和vuex一个Chrome扩展Kocal的项目，它使用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'".

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

我尝试了不同的方法：

$vue为仅内置的运行时定义别名vue.config.js（应该通过在运行时之前编译代码来消除不安全的评估，但以新错误结尾：Uncaught TypeError: Object(...) is not a functionfor 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拆分清单和内联清单添加配置

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

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

ko0stik

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。