vue devtools無法使用

一、總結

一句話總結：

沒顯示vue devtools調試工具的原因是用了生產環境的版本或是壓縮的vue版本，或是沒有勾選：允許訪問文件網址

 

 

二、vue調試工具Devtools不出現的解決方式

轉自或參考：vue調試工具Devtools不出現的解決方式
https://blog.csdn.net/przlovecsdn/article/details/82256558

 

在使用vuex時，想直觀的查看數據state的變動，用Devtools可實現，但是在Google瀏覽器中開發調試的時候，右上角出現vue的圖標，但是在開發者工具中沒有出現vue調試（已在擴展程序中安裝 Vue Devtools）

vue圖標：

 

 

開發者工具：

 

 

擴展程序：

 

 

沒顯示調試工具的原因是用了生產環境的版本或是壓縮的vue版本，或是沒有勾選：允許訪問文件網址

https://github.com/vuejs/vue-devtools

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

 

 

 

如果勾選了還是沒有顯示，說明采用了壓縮版/生產版的Vuejs，則繼續采用如下方案：

解決方案一：

采用script方式引入，需要在webpack.base.config.js添加externals

externals: {
    'vue': 'Vue',
},

然后在index.html引入https://cdn.bootcss.com/vue/2.5.16/vue.js，在main.js中干掉import vue from 'vue'，

放到生產環境時，換成https://cdn.bootcss.com/vue/2.5.16/vue.min.js,

此種方式可以減少vendor打包體積

 

方案二：

在main.js中添加

// 若是沒有開啟Devtools工具，在開發環境中開啟，在生產環境中關閉
if (process.env.NODE_ENV == 'development') {
    Vue.config.devtools = true;
} else {
    Vue.config.devtools = false;
}

附注：vue各版本

	UMD	CommonJS	ES Module
完整版	vue.js	vue.common.js	vue.esm.js
只包含運行時版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
完整版 (生產環境)	vue.min.js	-	-
只包含運行時版 (生產環境)	vue.runtime.min.js	-	-