Vue 3 与 Tauri 集成开发跨端APP

1、安装RUST

下载地址:Install Rust - Rust Programming Language

安装:

安装完成后,在命令行里运行: rustup

2、安装 Node.js 与 npm 或 pnpm ,如果已经安装,可以忽略

复制代码
# 使用 nvm 安装 Node.js 最新版本
nvm install --lts
nvm use --lts

3、安装 Tauri CLI:

复制代码
npm install -g create-tauri-app

4、创建 Vue 3 + Tauri 项目

使用 Tauri 初始化项目:

复制代码
npm create tauri-app@latest

提示: 安装时选择 Vue3 和 TypeScript 模板。

进入项目目录:

配置 Vue 3 环境

复制代码
{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173", // Vite 开发服务器路径
    "distDir": "../dist" // 构建后的目录
  },
  "tauri": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600,
        "resizable": true
      }
    ]
  }
}

运行开发模式

复制代码
yarn install
yarn run dev

打包应用程序

1、打包h5 yarn run build

2、打包exe

复制代码
yarn run tauri build
相关推荐
无奈何杨5 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭13 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆17 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼26 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子28 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆29 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了29 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆34 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js