企业官网建设流程全解析

前言

整个流程和tauri官网的差不多，本篇只是记录一下自己的过程。主播是是个前端的小白，写了个web工具想打包成exe直接在电脑上跑方便点，所以主播的流程是官网快速开始-》创建项目中的第三小节使用 TauriCLI创建。

准备tauri环境

tauri官网地址

打开项目

主播用的ide是trae，是基于vscode搞过来的，不用ide也行，整个过程只会用到其终端工具。这个工程是一个React框架的，用Vite打包。你也可以直接用命令行打包。

Build一下项目

tauri打包要用到vite构造出来的文件的，所以要先build一下项目。如果你的项目没有安装npm，在终端（cmd）输入下面这个命令安装npm。

npm install

安装完成后输入

npm run dev

看看能不能预览

这样就能预览了，在浏览器输入http://localhost:3000/就可以看到了

按Ctrl+C停下

在终端输入

npm run build

构建项目。

这样就构建完成了。

在ide的文件夹列表可以看到dist文件夹

给项目安装tauri环境

在终端输入cmd命令

npm install -D @tauri-apps/cli@latest

这样就把tauri包下载到项目里了

然后使用下面这个命令在终端初始化tauri的环境

npx tauri init

然后可以一路确定，但是要注意的是web assets，如果你是vite构造的话应对把build改为dist，当然你也可以后面自己去配置文件里面去改，下图是改好了的。

使用tauri打包项目

使用下面这个命令看看预览

npx tauri dev

等待命令结束就会弹出一个window窗口，这个是预览tauri打包出来是什么样子的。

可以在这里找到dev出来的exe文件

确定没问题后就可以打包发行版了

使用下面的命令打包发行版

npx tauri build

当然可能会遇到下面这个问题，提示你包名不可用

下面这个图，框框靠上面的那个是tauri的打包配置，下面那个框框是vite的打包配置，具体的配置参数可以自己去官网找找,箭头所指的就是包名，由于主播是自己用的工具，所以主播随便改改就行了。

改完后再运行一次下面的命令

npx tauri build

等待结束就可以在文件列表看到这个release文件夹了。