如何在开发模式下使用 typecipt 在 vue 3 中启用 devtools

Question

我正在使用 typescript 在 vue 3 中开发一个新应用程序。我在 Chrome 中安装了 Vue Devtools，但它拒绝将该应用程序识别为 Vue 应用程序，并指出

Vue.js not detected

。我在网上找到的帮助是在main.js中添加

Vue.config.devtools = true;

。然而

Vue

在 main.ts 中不可用我还找到了调整 webpack 配置的说明，但是项目中没有 webpack（这是由

vue-cli

设置的。

Answer 1

从这里下载或使用浏览器安装：

vue devtools version is v6.0.0 beta

Answer 2

我需要两者兼而有之，甚至更多。

1。安装 Vue 3 的插件
2。在配置中启用开发工具

此外，如果您安装了 Vue 2 和 Vue 3 的插件，则必须禁用其中一个插件才能使开发者控制台中的 Vue 选项卡正常工作。

因此，如果您现在使用 Vue 3 进行开发，请禁用 Vue 2 的插件。

Answer 3

添加来自 Tolbxela 和 byungster 的答案：

我将以下命令放入 main.ts 中：

app.config.performance = true;

而不是：

app.config.devtools = true;

“devtools”不再存在于配置中，它破坏了打字稿编译器。

其他信息：我需要重新启动浏览器并启动 VueDevtools 稳定版本。

Answer 4

如果有人在 2022 年遇到同样的问题，对我们来说问题是我们使用带有各种环境变量的

.env

文件，尤其是

VITE_NODE_ENV=development

。

出于某种我不知道的原因，如果 Vue Devtools 检测到

.env

文件的存在，它将搜索名为

NODE_ENV

且不带

VITE_

前缀的属性。

并且因为它在我们的 env 文件中没有找到这个键（因为我们在它前面加上了 VITE_ 前缀），所以它认为我们处于生产模式。

最终答案是：如果您使用

.env

文件，请添加

NODE_ENV

键并将其设置为

development

，奇迹就会发生。

Answer 5

也许将此代码添加到“main.ts”会有所帮助。

const app = Vue.createApp(App)

app.config.devtools = true

Answer 6

如果您正在使用

vite

，您需要添加您的

vite.config.js/ts

以下标志：

VUE_PROD_DEVTOOLS（在生产中启用/禁用 devtools 支持，默认值：false）

export default defineConfig({
     __VUE_PROD_DEVTOOLS__: 'true'
});