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

BioLinua

已于 2022-08-13 15:07:24 修改

阅读量714

点赞数

分类专栏： Tauri+vite笔记文章标签： vue.js electron 前端

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

本文链接：https://blog.csdn.net/qq_37331806/article/details/126319661

版权

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

3 篇文章 0 订阅

订阅专栏

参考地址：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

优惠劵

BioLinua

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Electron，Tauri运行vue-devtools教程

非常详细的教程，每一步都有图示**只需要用npm下载vue-devtools包，以及修改index.html文件，即可使用**
复制链接

扫一扫

专栏目录

vue-electron：一个带有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和webpack的Electron＆Vue.js快速入门样板，Quasar1.xVuetify2.x SassLessStylus

01-31

:high_voltage: Vue电子样板具有vue-cli支持的Electron＆Vue.js快速入门样板资讯入门 # Install vue-cli and scaffold boilerplate $ npm install -g @vue/cli $ npm install -g @vue/cli-init $ vue init kdydesign/vue-electron my-project $ cd my-project $ npm install $ npm run dev 关于主要模块 vue-electron使核心依赖模块保持最新。 :red_heart_selector: 核心模组版电子 11.x Vue-CLI 3.x Vue 2.x 巴别塔 7.x :trident_emblem: CSS预处理器模组版萨斯 5.x 减 4.x 触控笔 0.54.x :white_medium_star: 构架模组版类星体 1.14.x 证明 2.4.x 执照版权所有（c）

vue-devtools.zip

11-07

在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。而Electron本来是应该预装好了vue-devtool的，奈何 electron-devtools-installer 这个库不知道有什么问题，故本资源可以为Electron开发封装vue-devTools拓展

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

开启热部署功能 devtools

cjh的博客

05-24

747

1、添加热部署依赖到服务的 pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <option

Tauri 进阶使用与实践指南

最新发布

算命de博客

04-03

651

在 Tauri 应用开发中，调试分为两大部分：Web 端与 Rust 控制台。

vue-vconsole-devtools:Vue-devtools嵌入vConsole插件

04-10

# Vue-vConsole-devtools Vue-vConsole-devtools 是一款vConsole插件，把Vue.js官方调试工具vue-devtools移植到移动端，可以直接在移动端查看调试Vue.js应用为什么需要本插件：在Safari和移动端无法直接调试 Electron版本的devtools安装和远程调试配置非常麻烦 ### 功能移植了官方Vue-devtools的全部功能针对移动端优化了部分操作方式 ### 使用方式 npm i -s vue-vconsole-devtools 在工程中入口文件（如src/main.js） ... import VConsole from "vconsole"; import Devtools from 'vue-vconsole-devtools' Devtools.initPlugin(new VConsole())

nuxt-devtools:将独立（电子）vue-devtools与nuxt一起使用

05-23

Nuxt-Devtools 安装安装2个包装 yarn global add @vue/devtools yarn add @ec-nordbund/nuxt-devtools -D 将此添加到您的nuxt.config.json中： export default { buildModules : [ "@ec-nordbund/nuxt-devtools" ] , } ; 启动运行nuxt命令后，在额外的终端窗口中使用vue-devtools启动vue-devtools。

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

japlus的博客

11-02

285

Error: THREE.FBXLoader: Unknown format.

Tauri的安装、启动、打包和很多用例(第一部分)

三巧的博客

02-27

8578

Tauri的使用

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

我们都在旅行

07-18

1232

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

Tauri 与 Electron

weixin_42439919的博客

04-08

1934

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

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

kinghzking的专栏

10-12

2007

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

electron-vue-template:electron vue 模板

05-08

electron-vue-template 一、项目运行 1. 依赖安装 yarn install # 或者 npm install 2. 开发模式 yarn electron:serve # 或者 npm run electron:serve 3. 生产打包 yarn electron:build # 或者 npm run electron:...

electron-vue-element-admin:一个可以在electron上跑的vue-element-admin最新版，会跟随更新

05-25

electron-vue-element-admin基于最新的Node，最新的vue-element-admin和最新的Electron，并且package.json中依赖的package都使用最新的版本，让完整版的vue-element-admin成功跑在Electron中。Workable electron-vue...

Electron Vue-具有vue-cli脚手架，常见Vue插件，electron-packager / electron-builder，单元/ e2e测试，vue-devtools和webpack的Electron＆Vue.js快速入门样板。-Vue.js开发

05-27

electronic-vue充分利用了vue-cli的脚手架，带有vue-loader，electron-packager或electronic-builder的Webpack以及一些最常用的插件，如vue-router，vuex等。在此处查看详细文档。您会在此样板中找到的东西...

vue-devtools

03-29

安装$ yarn add vue-devtools -D# or npm$ npm install vue-devtools --save-dev用法正在安装在main.js调用install const { app } = require ( 'electron' )app . on ( 'ready' , ( ) => { // ... if ( process . ...

electron-vue-screen-capture

05-19

电子视屏捕获 ... from : 'node_modules/electron-vue-screen-capture/dist_electron/bundled/' , to : './screen-capture' } ] } } } // use import { init , start , close , targetWin } from 'ele

tauri在build模式开启右键检查debug功能，找了一上午，结果只是一条命令的事...

04-14

905

tauri默认的build模式下是不会有右键检查功能的，只有dev模式下才有检查，但是有时候我就是想要有检查功能啊啊啊啊啊，因为build的程序可能会出现各种错误......

vue 打包桌面应用 pwa应用 Vue PWA tauri Tarui + Vue 打包成桌面应用 vue打包成桌面应用 vue 部署桌面应用 vue部署为桌面应用 vue部署为桌面应用

半只

08-04

3948

以上的 Electron 配置 - package.json 、main.js 都只是基础配置，如果还需要更改应用图标等配置请参考官方文档，部分配置需要实际去配置，不然就会出现请求后端出现跨域、路由之类的问题(没出现就不需要管)

Tauri 的基本使用笔记

Lovely Ruby 的手账

02-06

1733

记录一下 Tauri 的基本操作。

vue3 + electron 解决 vue-devtools无法安装

04-23

你可以尝试以下步骤来解决 vue-devtools 无法安装的问题： 1. 首先，确保你已经按照官方文档安装了 vue-cli-plugin-electron-builder 插件，这是构建 Electron 应用的必要插件。 2. 然后，安装 vue-devtools 的最新版本：npm install -D @vue/devtools。 3. 接下来，在 Vue 项目的入口文件中添加以下代码： ``` import { createApp } from 'vue' import App from './App.vue' if (process.env.NODE_ENV === 'development') { const { createRenderer } = require('@vue/runtime-dom') const renderer = createRenderer({ querySelector: selector => document.querySelector(selector), createElement: (tag, isSVG, is, props) => document.createElement(tag), insert: (child, parent, anchor) => { parent.insertBefore(child, anchor || null) }, patchProp: (el, key, prevValue, nextValue) => { el.setAttribute(key, nextValue) }, forcePatchProp: (_, key) => key === 'value' }) const root = renderer.createApp(App).mount('#app') // 开发环境下开启 Vue Devtools window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = root.constructor } else { createApp(App).mount('#app') } ``` 4. 最后，在浏览器中打开 vue-devtools，点击 Setting -> Connection，设置 Host 为 localhost，Port 为 Electron 应用监听的端口号，一般默认为 5858，点击 Apply 即可。希望以上步骤能够帮到你解决问题。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交