Javascript 如何在web扩展弹出窗口中使用Vue.js？

我正在尝试开发一个web扩展，并使用Vue设置弹出窗口的样式，但它似乎不起作用。代码目前非常基本

manifest.json：

{
  "manifest_version": 2,
  "name": "Web Extension",
  "description": "Web Extension",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": "icons/compass.svg",
    "default_title": "Web Extension",
    "default_popup": "popup/index.html"
  },
  "permissions": ["<all_urls>"]
}

{
“清单版本”：2，
“名称”：“Web扩展”，
“说明”：“Web扩展”，
“版本”：“1.0.0”，
“浏览器操作”：{
“默认图标”：“icons/compass.svg”，
“默认标题”：“Web扩展”，
“默认弹出窗口”：“popup/index.html”
},
“权限”：[“
如果检查弹出窗口，您将看到错误，指出浏览器由于CSP而拒绝加载vue脚本（您必须在清单中指定扩展可以访问哪些资源）
在清单中添加以下CSP以加载脚本：

   "content_security_policy": "script-src 'self' https://unpkg.com; object-src 'self'" 

脚本加载但这也不起作用：浏览器拒绝执行内联脚本，因为它违反了CSP。此脚本更复杂，因为它与使用eval函数呈现模板的vue相关。
要解决这个问题，您必须用js编写渲染函数（您不想这样做…）或编译模板。
有很多解决方案可以做到这一点。在我看来，使用是更简单的方法。您可以在几分钟内开始使用模板，例如，它将使用vue和webpack（为您完成所有webpack配置）创建与您的（Hello World弹出窗口）几乎相同的扩展。一旦安装，使用

npm run build

并从chrome中的dist目录加载解包的扩展。工作起来很有魅力。（或者使用WebExtCLI在Firefox中轻松运行）

npm run build