关于Electron，Tauri运行vue-devtools教程

安装Vue Devtools教程

原创已于 2022-08-13 15:07:24 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

于 2022-08-13 15:01:56 首次发布

Tauri+vite笔记专栏收录该内容

3 篇文章

订阅专栏

参考地址：VueDevtools官网https://devtools.vuejs.org/guide/installation.html#standalone

首先！！在全局环境下安装Vue-devtools

cnpm install -g @vue/devtools

//若是没有cnpm可以使用下面这个
npm install -g @vue/devtools

安装成功后，直接在cmd中运行：

vue-devtools

然后它就会打开窗口

复制里面的代码到项目的index.html文件中

tauri+vite构建的项目，index.html文件如下：src-tauri目录下

Electron + vite构建的项目文件如下：项目根目录下

然后，在head中添加刚刚复制的代码：

保存index.html文件后，窗口就会刷新，如图：

vue-devtools可以正常使用

笔者测试环境为：Tauri+vite

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BioLinua

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【调试笔记-20240620-Windows- Tauri + Vue 中实现部分区域滚动】

David唐辉的博客

06-20

622

本文记录在 Windows 环境下调试 Tauri 程序，实现类似原生界面的部分区域滚动的效果的方法。实验使用的电脑如下：本文记录在 Windows 环境下调试 Tauri 程序，实现类似原生界面的部分区域滚动的效果的方法。

Electron - #001 搭建Windows开发环境（Vue3+TS）

AlanL的专栏

09-08

939

搭建Windows开发环境（Vue3+TS）

参与评论您还未登录，请先登录后发表或查看评论

tauri 访问静态资源，响应头为Content-Type:‘text/html‘

japlus的博客

11-02

527

Error: THREE.FBXLoader: Unknown format.

跨平台桌面应用开发选型深度解析：Electron与Tauri全方位对比

最新发布

weixin_54447959的博客

10-14

1200

Electron：以“JS全栈”为核心，凭借成熟的生态、低学习门槛、强兼容性，成为大型企业级应用、快速原型开发的首选框架，但代价是体积大、资源占用高、安全性需手动配置。Tauri：以“轻量、高效、安全”为核心，依托系统WebView和Rust语言，实现了小体积、低资源占用、高安全性的优势，适合轻量级工具、高安全性应用、嵌入式设备，但需要开发者掌握Rust语言，生态暂未成熟。

WEB跨平台桌面程序构建工具对比（Electron、Tauri、Wails）

我们都在旅行

07-18

3614

本次浅显对比了简单 web 应用的打包，没有涉及到后端的原生计算、交互等，仅供参考。

【electron】手把手教你在 electron 环境下使用 vue-devtools，附详细报错解决办法

kinghzking的专栏

10-12

5731

Vue Devtools 是一款由 Vue.js 官方开发的开发工具，旨在帮助开发者更轻松地调试和开发 Vue.js 应用程序。这个问题半年前就发现了，当时没有解决掉，后来经常想到该问题，最近想到通过Edge浏览器可以下载最新的插件，省去了各种可能遇到的坑，最终解决问题。总之，Vue Devtools 是 Vue.js 开发者必备的工具之一，可以帮助开发者更高效地开发和调试 Vue.js 应用程序。遇到问题，多搜索，多思考，结合现有知识，找到合适的方案。这个就不说了，简单方便，但是获取的不一定是最新的。

【Tauri2】42——调试tauri

qq_63401240的博客

05-09

1386

本文主要介绍了如何在JetBrains IDE中调试Tauri项目，特别是使用RustRover进行调试的过程。作者最初按照官方文档操作未能成功，后来发现需要分别在前端和后端运行命令，并在RustRover中以调试模式运行后端，才能使断点生效。此外，作者还探讨了如何使用LLDB调试工具修改内存中的值，并成功实现了对字符串的修改。通过这一过程，作者对Rust中的String和&str有了更深入的理解，并最终成功调试了Tauri项目。 ——AI生成

Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-项目介绍

weixin_39141295的博客

04-30

907

随着 Linux 操作系统在服务器、嵌入式设备和开发者工作站等领域的广泛应用，对系统资源进行实时监控和可视化呈现的需求日益增长。传统命令行工具虽然功能强大，但在数据直观性和操作便捷性上存在局限性，而现有图形化监控方案往往面临跨平台兼容性差、资源占用高等痛点。本书以构建现代化跨平台 Linux 系统监控工具为目标，采用创新性的技术组合方案：在后端使用 Golang 实现高性能系统信息采集，充分发挥其并发处理优势和低资源占用的特性；前端采用 Vue3 框架构建响应式数据可视化界面。

tauri devtools

02-11

### 使用 Tauri DevTools 进行调试和开发 #### 安装 Tauri DevTools ...此时可以通过独立安装方式获取最新版 Vue Devtools 并将其作为 Electron 类型应用启动，从而方便监测 Vuex Store 变化等内容[^3]。

Tauri（一）——更适合 Web 开发人员的桌面应用开发解决方案 ✅

infinilabs的博客

10-30

2497

（v2.0）（Star 84k）创建小型、快速、安全、跨平台应用程序（v33.0）在此，我们必须提到Electron，它可能是当今最流行的跨平台框架。从其版本的迭代，Star 的数量都不难看出。Electron已经凭借成为众多知名应用程序的基础证明了自己的价值。如上图，进入该网址可以看到广泛的案例，每一个使用的应用都证明了Electron的强大功能和受欢迎程度。开发社区也对Electron所取得的成就给予了高度认可。

Tauri 桌面应用开发实践：现代跨平台开发体验

丑黑娃的博客

07-29

1077

Tauri实战体验：开发机器学习模型对比工具本文分享了使用Tauri框架开发桌面应用的实际体验。相比Electron，Tauri采用Rust+Web技术，显著减小应用体积（避免打包Chromium），同时保持Web开发便利性。其核心优势包括：1）使用系统原生WebView实现轻量化；2）基于Rust的安全设计，默认拒绝系统访问；3）完善的跨平台支持；4）保留熟悉的Web开发工作流。通过开发机器学习模型对比工具（包含文件验证、图像处理、可视化等功能），验证了Tauri在性能密集型任务中的优势，特别是发布模式

vue-cli-plugin-tauri:将您的Vue SPA变成轻量级的跨平台桌面应用程序

04-28

vue-cli-plugin-tauri 是用于通过Web前端创建更小，更快，更安全的桌面应用程序的工具包。该插件将Tauri配置为可在您的Vue CLI项目中使用。安装如果您有任何问题，请访问或我们的。一般先决条件： NodeJS / npm Vue CLI（ yarn global add @vue/cli / npm i -g @vue/cli ） Tauri CLI（ cargo install tauri-bundler ）（可选，但建议超过npm）详细的先决条件安装说明： Linux：： Mac：： Windows：：脚步：创建一个Vue CLI项目（或cd到现有项目中） vue create my-tauri-app cd my-tauri-app 安装Vue CLI插件Tauri vue add tauri 运行命令使

electron+vue项目安装vue-devtools插件

feinifi的博客

10-16

6673

这里记录一下自己安装过程中遇到的问题： 1、首先需要安装vue-devtools，遇到了源码编译构建的时候的webpack,webpack-cli反复提示缺失的问题。这个问题很烦: a git clonehttps://github.com/vuejs/vue-devtools 这一步其实有个巨坑，官方的代码默认是dev分支，我们需要切换到master分支，才能顺利的进行build。切换分支需要在命令行下执行如下指令即可： git checkout ...

tauri + vue 初探

XPlaza的博客

10-10

1741

最近公司准备做桌面端项目，准备使用tauri构建一个桌面版本软件，于是稍微研究了一下搭建一个基础框架。总的来说试用下来和electron体验差不多，感觉各方面配置可能相对来说要更加简单易用一点。编译后的包也非常小只有5M左右大小，不会像electron最少都是70M的包了。不过就是主程序使用的rust增加了学习成本。

使用vue-devtools调试Electron程序

chenggedian7759的博客

04-26

1902

举个例子：如果你用了ipc,在这里打断点平常是跑不到的，加上devtools才可以。 ipcRenderer.on('getAutoStartValue', (event, result) => { this.autoStart = result }) 0.局部或全局安装 np...

【Tauri】Vue+Vite+Tauri 多端开发桌面应用记录

刻痕

12-18

1553

# 【Tauri】Vue+Vite+Tauri 开发桌面应用 ## 前置工作 ### 1.安装nodejs Vue、react等项目运行在node环境，需要安装nodejs 腾讯软件中心直接下载安装即可：[https://pc.qq.com/search.html#!keyword=node](https://pc.qq.com/search.html#!keyword=node) #### 设置淘宝源地址（建议）默认的官方源地址太慢了 ```powershell npm config set re

解决electron10.1.3+vue3无法显示vue-devtools问题

总之就是非常可爱

10-18

7384

项目使用@vue/cli 4脚手架创建 package如下，我使用的electron-devtools-installer 科学上网自动安装 "vue": "^3.0.0" "electron": "10.1.3", "electron-devtools-installer": "^3.1.1", "vue-cli-plugin-electron-builder": "~2.0.0-rc.4" background.js中的安装代码： app.on("ready", async () =>

tauri+vue开发小巧的跨OS桌面应用-股票体检

字母哥博客

07-05

3341

tauri出现了，electron有的优点他都有，比如支持使用前端语言开发、支持跨端安装，更重要的是使用tauri构建应用安装包一般只有十几MB，本文构建的版本安装文件只有2.9M，也是绝了

Tauri 与 Electron

weixin_42439919的博客

04-08

2344

Tauri 什么是 Tauri ? Tauri 是一个为所有主流桌面平台构建小型、快速二进制文件的框架。开发人员可以集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 Rust 二进制文件，具有前端可以与之交互的 API。安装方式 Xcode $xcode-select--install Rust $curl--proto'=https'--tlsv1.2-sSfhttps://sh.rustup.rs|sh ...