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

心肝到爆

于 2024-07-16 16:13:06 发布

阅读量700

点赞数 29

文章标签： vue.js 前端 javascript rust 前端框架 windows

本文链接：https://blog.csdn.net/qq_52132550/article/details/140469208

版权

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

// 安装依赖
npm install
// 运行测试是否正常
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/128x128@2x.png",
        "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 // 窗口是否打开默认居中
      }
    ]
  }
}