expzhizhuo / my-chromev3-vue-ant-plugins

Chrome V3版Vue3.x+Ant,谷歌插件开发项目结构以及Dome
5 stars 3 forks source link

[Solved] "vue-cli-service build --watch" manifest v3 hot reload 不起作用,无法热重载扩展。 #1

Open hoangthisd opened 1 year ago

hoangthisd commented 1 year ago

据我所知,manifest v3 阻止了热重载,错误会出现如下,你知道如何启用热重载吗? Uncaught 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' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost: http://127.0.0.1:". 如果不这样做,每次完成代码更改后都必须再次构建,非常浪费时间。

expzhizhuo commented 1 year ago

你需要重新去改webpack的配置,在热更新的时候会产生eval函数,在v3版本中会被认为是不安全的使用,所以如果你不去修改webpack的配置的话,你就需要每次npm run build去重新生成然后去检查你编写的配置是否生效。

hoangthisd commented 1 year ago

多谢 兄弟, 现在工作得很好.

I highly appreciate your support, it works now. Anyone experiencing issues with hot reloading a Chrome extension manifest v3 + Vue.js, just needs to edit the vue.config.js file as follows to avoid using the "eval" funtion, that has been blocked by man v3: // vue.config.js module.exports = { configureWebpack: { devtool: 'cheap-module-source-map', devServer: { hot: false, liveReload: true } } };

This configuration sets the devtool option to cheap-module-source-map, which generates a separate source map file instead of using the eval function. It also sets the hot option to false and the liveReload option to true in the devServer configuration, which enables live reloading without using the eval function.