tauri 将网页打包成exe和已有的vue项目打包成exe

tauri 将网页打包成exe和已有的vue项目打包成exe

一、url注入的方式打包成exe

一.准备动作

1.安装

Microsoft Visual Studio C++

生成工具

您需要安装 Microsoft C++ 生成工具。 最简单的方法是下载 Visual Studio 2022 生成工具，如果是 win11 同时勾选 win11 SDK，如果是 win10 旧勾选 win10 SDK

一般不需要自己勾选，工具会自动勾选当前系统对应的SDK

勾选要安装的依赖，直接点击 安装 。

2.安装 Rust 直接下一步 下一步安装即可。

前往 https://www.rust-lang.org/zh-CN/tools/install 来安装

rustup

(Rust 安装程序)。 请注意，为了使更改生效，您必须重新启动终端，在某些情况下需要重新启动 Windows 本身。

二. 创建一个基础模板

在cmd或者powershell中执行 ：

npm create tauri-app

然后输入项目名称，会自动生成目录，选择包管理工具，选择UI模板，这里我选择Vue，还可以选择react 等前端模板框架

这个步骤 和 构建 vue项目是一样的

创建完成后，进入到项目 目录，安装依赖，再运行tarui

// 安装依赖
npminstall
// 运行测试是否正常
npm run tauri dev

三.修改项目文件内容

我们进入项目里面，修改里面的一个src-tauri\tauri.conf.json配置就可以了：

identifier表示软件的唯一标识，一定要改，随便改，不然无法打包。 windows 中的 url 表示通过url的方式注入页面。

另外一些icon 可以自己慢慢替换

url:可以替换为自己的网站，打包出来就是自己的网站内容。

在项目的 package.json添加两个命令

"develop":"tauri dev",
 
    "pubhome":"tauri build"

然后执行打包命令：

npm run pubhome

这个过程也很长，第一次需要等待十分钟左右吧，等完成之后，会显示打包后的安装程序路径，或者有一个直接可以双击打开的exe包

然后直接安装使用，打开就可以看到页面是百度的了：

二、vue打包好的dist 打包成exe

一.方便演示重新创建一个新的基础模板

创建步骤同上

二.文件目录说明

src 文件夹 存放的是 Vue源代码，可以将已有的Vue代码全部复制过来，注意Vue版本, Tarui 使用的是 vue3 版本, 如果想使用 Tauri作为 Vue基础框架来开发应用，直接把Vue源码全部放到里面去，不是用 Tauri为基础做Vue开发 不用管这个文件夹，我们目前只需要打包就可以! 所以暂时不用关注这个文件夹。src-tauri 是Tauri配置文件夹。包含 icon图表等信息,重点关注。

tauri-conf.json

配置文件 说明

{"build":{// 执行 npm run tauri build 打包命令 会按依次顺序执行 这几条命令"beforeDevCommand":"npm run dev",// 英文就能看出大概是什么意思，运行生产环境前的命令"beforeBuildCommand":"npm run build",// 这一步命令可以去掉，后面会讲为什么(这一步是将 src下的Vue源码打包) 打包前要执行的命令"devPath":"http://localhost:1420",// Tauri生产环境网页端运行地址端口"distDir":"../dist",// 静态文件存放路径，将该路径下的静态文件打包为桌面应用，直接将 vue打包的dist文件夹复制过来"withGlobalTauri":false},"package":{"productName":"pms-demo",// 项目名称"version":"0.0.1"// 版本号},"tauri":{"allowlist":{"all":false,"shell":{"all":false,"open":true}},"bundle":{"active":true,"icon":[// 图片存放路径"icons/32x32.png","icons/128x128.png","icons/[email protected]","icons/icon.icns","icons/icon.ico"],"identifier":"pms-demo",// 程序唯一标识名称，必须要"targets":"all","windows":{"wix":{"language":"zh-CN"// 语言}}},"security":{"csp":null},"updater":{"active":false},"windows":[{"fullscreen":false,"resizable":true,"title":"PMS应用程序","width":900,// 窗口宽度"height":600,// 窗口高度"center":true// 窗口是否打开默认居中}]}}

三.文件改动

这个是使用tauri 项目创建打包生成的dist 文件，可以自己测试

npm run build

,生成的就是这个。

重点：现在我们需要将我们自己的vue项目打包生成好的dist 放到跟node_modules平级下，删除掉tauri打包好的dist。

执行打包命令

npm run tauri build

就会依次执行 tauri.conf.json 中的 build模块所有命令

，所以需要去掉

tauri-conf.json

中的

 beforeBuildCommand

切记一定要把

tauri.conf.json 

中的这一行去掉，因为这一行代码是 将 src下的vue源代码进行打包，然后 在编译成桌面应用，我们不需要 ，因为我们已经有 打包好的 dist 静态文件了

到这里就完成打包了。。。

可以看到 tauri非常简单，只需要创建一个

Tauri项目

, 再把 vue 打包好的 dist文件夹复制过来，在 tauri 项目中执行打包命令，就可以将Vue编译成桌面应用.

安装打开，就可以看到，项目成功运行。