Vue拡張機能のプロダクションモードでchrome devtoolsを有効にする方法は？

Question

chrome拡張機能を構築し、vue-cli webpack構成を使用しています。vue devtoolsを実行した後、 npm run buildコマンド。

追加しようとしたVue.config.devtools = true; main.jsで、またはNODE_ENV: '"production"'からNODE_ENV: '"development"'、ただしvue devtoolsはまだ表示されません。

プロダクションモードでvue devtoolsを有効にするにはどうすればよいですか？

Alex Efremov · Accepted Answer

vue devtools in Chrome extensionを使用しようとしているため、問題が発生しているようです。残念ながら、vue devtoolsは拡張ページがchrome-extension：//で提供されるため

John Trump · Answer

まず、Vue devtools in Chrome ext開発環境が有効になっています。

経験

最近Chromeブラウザプラグインを開発しています。__VUE_DEVTOOLS_GLOBAL_HOOK__が未定義であることがわかりました。

大きな問題ではありませんが、解決したいと思います。オンラインで多くの情報を検索しました。

1.open chrome-extension://<hash>/app.html

2. Vue.config.devtoolsをtrueに設定します

3.grant Vue Devtools ext file access

しかし、すべては機能しません。

ご存知のように、vue-devtoolsはVueエコシステムの重要な部分ですが、現在はWebブラウザに関連付けられています。

しかし、現在、スタンドアロンのvue-devtoolsアプリケーションを提供するパッケージがあります。これは、環境に関係なくVueアプリをデバッグするために使用できます。モバイルブラウザー、safari、ネイティブスクリプトなど、デスクトップだけではありませんchromeまたはfirefox。

このパッケージ名はvue-remote-devtoolsで、リモートでデバッグするためのスタンドアロンのelectronシェルですVue apps！

試してみましょう：

README.mdステップに従って、

3. Chrome Extension .htmlファイルにスクリプトタグを挿入します。

プラグインに対するChromeのコンテンツセキュリティポリシー（CSP）の制限により、Chrome拡張機能のWebリクエストがブロックされる場合があります。

この時点で、Chrome Ext構成ファイルmanifest.jsを変更する必要があります。

content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"

content_security_policyを対応するファイルmanifest.jsにコピーできますが、CSPが何であるかを確認できることを願っています。

接続成功！

参照：