初识vite前言：最近项目要从vue2.x迁移到vue3，于是借此机会打算重构整个项目。在搭建项目的时候发现vue3更新了构建方式，放弃了webpack，使用了新的构建机制vite。再经过一番了解后发现vite借助了esbuild与rollup。vite开发大致分两个阶段开发阶段：vite采用no-bundle的方式,借助现代浏览器支持了esmodule的能力，在开发阶段项目无需打包即可运行调试，这让开发编译速度得到很大提升。生产阶段：为了在生产环境中获得最佳的加载性能，不能完全no-bundle，且由于rollup对于代码的tree-shaking和ES6模块有着算法优势上的支持，项目只需要

启动项目通过本地ip的方式访问方式一.通过修改package.json"scripts":{"dev":"vite--host0.0.0.0",},方式二.通过修改vite.config.tsexportdefaultdefineConfig({plugins:[vue(),vueJsx()],server:{//配置host与port方式host:"0.0.0.0",port:8000,},resolve:{alias:{"@":fileURLToPath(newURL("./src",import.meta.url)),},},});以上便是此次分享的全部内容，希望能对大家有所帮助!

难点：之前写了一个关于运行electron的文章 《现成的react项目直接转electron（1）能本地运行》后，又接着找打包的，找的是坑真多，全部失败，后来无意中看到 小满zs的B站视频 后，发现这个非常好，然后跟着重构一下，也可以直接看人家写的文章Vue3Viteelectron开发桌面程序和小满Vue3第三十九章（Vue开发桌面程序Electron）知识点：人家那是vue的，我这是react的，加减了一些东西，增加了【web层，渲染层，主进程】之间的互相通信交互，话不多说😑，接着填坑吧，填了的都是知识点1.还是先下载依赖pnpminstall-Delectronelectron-bui

创建项目我在这里直接是通过vite提供的默认模板来创建一个vue3 +ts的项目。这里可以cmd，然后npm-v来查看版本。#如果npm的版本是6.x版本，则使用下面这条命令创建项目yarncreatevite@latestvite-vue3-ts--templatevue-ts#如果npm的版本是7+以上版本，则使用以下命令yarncreatevite@latestvite-vue3-ts----templatevue-ts这样一个vue3+ts的项目就创建好了，使用vscode打开该项目，然后执行yarn安装依赖依赖安装完成后，执行  yarndev 启动项目就可以在浏览器中正常访问了。 

一、背景主应用：vue3、vite主项目接入qiankun子应用：vue3、webpack二、代码-接入子应用2.1、安装vite-plugin-qiankun（qiankun官方不支持vite）需要安装插件pnpmaddvite-plugin-qiankun2.2、vite.config.tsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'importqian

前端潮流速递:Electron的平替Tauri经常写Electron的朋友肯定知道,随便写点东西打包之后非常的大,并且每个窗口都是一个新的进程，占据大量内存,即使特点也是诟病. 所以由Rust语言实现的Tauri于 2022年6月发布了Tauri的前端实现也是基于Web系列语言，Tauri的后端使用 Rust。Tauri可以创建体积更小、运行更快、更加安全的跨平台桌面应用。Electron和Tauri之间的一些主要区别：底层技术：Electron： 使用Chromium作为底层渲染引擎，这是一个完整的浏览器引擎。这使得Electron具有强大的Web技术支持，但也导致了较大的二进制文件和较高的

一、RuoYi-Vue3 前端进行配置：二级域名名称统一为：admin1-1、修改vue.config.js文件中的base，如下截图： 1-2、修改在src/router目录下的index.js文件，注意：这里添加base的方式和添加ruoyi-ui前端项目的方式是不一样的，网上有很多文章都是以ruoyi-ui2.x这个版本在讲解，别被误导了，截图如下： 1-3、配置登出地址：修改/src/layout/componets/Navbar.vue文件里的logout()方法，截图如下： 二、Nginx配置：我这里做了nginx配置文件单独导入形式的配置，截图如下：1-1、 1-2、子配置文件配

.markdown-body{line-height:1.75;font-weight:400;font-size:16px;overflow-x:hidden;color:rgba(37,41,51,1)}.markdown-bodyh1,.markdown-bodyh2,.markdown-bodyh3,.markdown-bodyh4,.markdown-bodyh5,.markdown-bodyh6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-bodyh1{font-si

学习目标：做到代码格式等统一，此时，esint和prettier就要登场了。学习内容：eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。=>安装prettier+eslint包，并做一系列的配置学习时间：创建项目yarncreatevite选择vue作为framework选择vue-ts是package.json中配置的eslint和prettier相关的包：{"name":"xxx","private":true,"version":"0.0.0","type":"

一、前言由于electron在macOS下的坑太多，本文不可能把所有的问题都列出来，也不可能把所有的解决方案贴出来；本文也不太会讲解每一个配置点为什么要这么设置的原因，因为有些点我也说不清，我尽可能会说明的。所以，你要抛弃你之前所有已经完成的东西，最好弄一个全新的系统，严格按照本文的步骤做。建议用vmware虚拟机，装一个全新的macOS系统。配合vmware的拍照功能，如果中途出错，可以回退到虚拟机的上一个正常状态，非常方便。我也是在这篇文章以及网友的帮助下才走通这个流程的，你可以参考一下。Electron-builder构建MacOS应用小白教程（打包&签名&公证&上架）-掘金二、系统配置