使用vue3和vue-cli开发chrome扩展，如何热重载代码答案

【问题标题】：use vue3 and vue-cli to develop chrome extension, how to hot reload the code使用vue3和vue-cli开发chrome扩展，如何热重载代码
【发布时间】：2021-07-25 13:47:03
【问题描述】：

使用vue-cli创建一个vue3项目开发chrome扩展，现在可以了。但问题是每次代码更改时项目都需要重新构建。而且花了很多时间。

所以我尝试观察代码更改：

vue-cli-service build --watch

然后出现错误

未捕获的 EvalError：拒绝将字符串评估为 JavaScript，因为“unsafe-eval”不是以下内容安全策略指令中允许的脚本来源：“script-src 'self'”。

manifest_version

{
    "manifest_version": 3,
    ...
}

【问题讨论】：

您是否有一些适用于清单 v3 的 Vue 示例扩展？我尝试从 Vue2 和 manifest v2 迁移我的项目，但无法正常工作。
是的，我有。你可以在github.com/Kobshobe/qy_translate看到它

标签： webpack google-chrome-extension vuejs3

【解决方案1】：

确保您的清单 content_security_policy 没有 unsafe-eval，例如：

// This is for manifest v3
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self';"
}

你也可以在 vue.config.js 中添加 devtool 选项：

module.exports = {
  configureWebpack: (config) => {
    config.devtool = 'inline-source-map'
  },
};

只要确保您选择的源映射生成不使用 eval - https://webpack.js.org/configuration/devtool/

【讨论】：