web-dev-qa-db-ja.com

このページでVue.jsが検出されました。 Devtoolsインスペクションは、プロダクションモードになっているか、作成者によって明示的に無効にされているため利用できません

enter image description here

Google Chromeで vue-devtools を有効にしようとしています。しかし、私はそれを有効にすることはできません。 Laravelアプリケーション内でvue.jsを使用しています。

enter image description here

私のサーバーはphp artisan serveコマンド。

google-chromelaravel-5google-chrome-extensionvue.js
14
Isuru
  1. ページがVue.jsのプロダクション/縮小ビルドを使用している場合、デフォルトでdevtoolsインスペクションは無効になっているため、Vueペインは表示されません。
  2. File：//プロトコルで開いたページで機能するようにするには、Chromeの拡張機能管理パネルでこの拡張機能の[ファイルのURLへのアクセスを許可する]をオンにする必要があります。
  3. 私はクロムを再起動する必要があり、それはうまくいった:-)
12
zarpio

この質問のタイトルにエラーメッセージが表示されていました この解決策 はうまくいきました：

Vueインスタンスを作成するファイルにVue.config.devtools = trueを追加します（main.jsの場合）。

この答え で述べたように、devtoolsのVuex部分を機能させるには、ストアを作成する前にVue.config.devtools = true行を配置する必要があることに注意してください。別のファイル（store.jsなど）にVuexストアを作成する場合、Vue.config.devtools = trueファイルとmain.jsファイルの両方にstore.js行を含める必要がある場合があります。

以下は私のプロジェクトでの変更の様子です： enter image description hereenter image description here

4
Nathan Wailes

CDNを使用している場合;ライブラリの本番（縮小）ビルドを使用していないことを確認してください。

使用：https://unpkg.com/[email protected]/dist/vue.js

代わりに：https://unpkg.com/[email protected]/dist/vue.min.js

あなたがする必要があるかもしれませんCtrl+Alt+I初めて表示されます。 （ ソース ）

4
bmatovu

Laravelを使用する場合は、開発環境に適したWebpackを実行していることを確認してください。

npm run watch

Vueを構築する必要があります。

npm run production

最小化Vueプロダクション用。これにより、プロダクション用にビルドするときにデバッグモードを切り替えることを忘れずに済みます。

2
KCP

Vue.jsの開発バージョンを使用できます。たとえば、ここで取得します： https://unpkg.com/[email protected]

1
Allan Karlson

Vue CLI 3.xの短い回答
Vue CLI 3.xを使用している場合は、このスクリプトをpackage.jsonに追加するだけで実行できます。

scripts: {
   "test": "vue-cli-service build --mode=development"
}

説明
これは、本番モードではデフォルトでVue.config.devtoolsがfalseに設定されているためです GitHubの問題 。しかし、これには回避策があります、に提供されている--mode=developmentフラグを使用するだけです- ドキュメント 。

次に、npm run testを使用して実行し、dist/フォルダ内のファイルを確認できます。 ;）

1
Irfandy Jip

vue.jsの非プロダクションビルドを実行していることを確認してください。 https://github.com/vuejs/vue-devtools/issues/62

0
Hasnydesign