⚠️注意：当前版本只能在windows平台下打包，macOS跨平台打包仍然处于实验阶段，会出问题
[✔] Environment
- OS: Windows 10.0.26100 x86_64 (X64)
✔ WebView2: 133.0.3065.92
✔ MSVC:
- Visual Studio Community 2022
- Visual Studio 生成工具 2019
✔ rustc: 1.77.2 (25ef9e3d8 2024-04-09)
✔ cargo: 1.77.2 (e52e36006 2024-03-26)
✔ rustup: 1.28.1 (f9edccde0 2025-03-05)
✔ Rust toolchain: 1.77.2-x86_64-pc-windows-msvc (default)
- node: 20.12.2
- pnpm: 8.15.4
- yarn: 1.22.22
- npm: 10.5.0
[-] Packages
- tauri 🦀: 2.3.1
- tauri-build 🦀: 2.0.6
- wry 🦀: 0.50.4
- tao 🦀: 0.32.8
- @tauri-apps/api : 2.3.0
- @tauri-apps/cli : 2.3.1
[-] Plugins
- tauri-plugin-opener 🦀: 2.2.6
- @tauri-apps/plugin-opener : 2.2.6
- tauri-plugin-notification 🦀: 2.2.1
- @tauri-apps/plugin-notification : not installed!
[-] App
- build-type: bundle
- CSP: unset
- frontendDist: ../dist
- devUrl: http://localhost:11420/
- framework: Vue.js
- bundler: Vite
Microsoft.WebView2.FixedVersionRuntime.109.0.1518.78.x64.cab
Expand .\Microsoft.WebView2.FixedVersionRuntime.109.0.1518.78.x64.cab -F:* ./src-tauri
Cargo.toml
[dependencies]
tauri-plugin-notification = { version = "2.0.0", features = [ "windows7-compat" ] }
tauri.conf.json
{
"bundle": {
"windows": {
"webviewInstallMode": {
"type": "fixedRuntime",
"path": "./Microsoft.WebView2.FixedVersionRuntime.109.0.1518.78.x64/"
}
}
}
}
rustup install 1.77.2
rustup default 1.77.2
rustc --version
以下是我所用版本需要降级的依赖
需要在src-tauri目录下执行
cargo update zerofrom@0.1.6 --precise 0.1.5
cargo update litemap@0.7.5 --precise 0.7.4
cargo update cargo-platform@0.1.9 --precise 0.1.8
cargo update cargo_metadata@0.19.2 --precise 0.19.0
npm run tauri build
处于兼容性考虑使用shadcn@2.3.0
npx shadcn@2.3.0 init
输出：
√ The path E:\yangziwen\Workspace\git does not contain a package.json file.
Would you like to start a new project? » Next.js
√ What is your project named? ... tauri-win7
✔ Creating a new Next.js project.
√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Neutral
√ Would you like to use CSS variables for theming? ... no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app\globals.css
Installing dependencies.
It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).
√ How would you like to proceed? » Use --force
✔ Installing dependencies.
✔ Created 1 file:
- lib\utils.ts
为保证兼容性，将react降到18版本
cd .\tauri-win7\
npm i react@18 react-dom@18
本教程taur版本为2.4.0
npm install -D @tauri-apps/cli@latest
npx tauri init
全部选默认即可
✔ What is your app name? · tauri-win7
✔ What should the window title be? · tauri-win7
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../out
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build
src-tauri/tauri.conf.json
{
"build": {
"frontendDist": "../out",
"devUrl": "http://localhost:3000",
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"
},
}
next.conf.mjs
import type { NextConfig } from "next";
const isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
const nextConfig: NextConfig = {
// 确保 Next.js 使用 SSG 而不是 SSR
// https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
output: 'export',
// 注意：在 SSG 模式下使用 Next.js 的 Image 组件需要此功能。
// 请参阅 https://nextjs.org/docs/messages/export-image-api 了解不同的解决方法。
images: {
unoptimized: true,
},
// 配置 assetPrefix，否则服务器无法正确解析您的资产。
assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};
export default nextConfig;
package.json
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"tauri": "tauri"
},
按照前文所述步骤进行配置即可
第一步：下载支持win7的最后一个WebView2版本
第二步：解压到项目的src-tauri目录中
第三步：修改打包配置
第四步：降级rust到1.77.2
第五步：尝试npm run tauri build，并降级报错依赖
第六步：打包
在项目根目录执行
npx shadcn@2.3.0 add dashboard-01
修改app\page.tsx
import { Button } from "@/components/ui/button";
import Link from "next/link";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Button asChild>
<Link href="/dashboard">Dashboard</Link>
</Button>
</main>
</div>
);
}
调试项目：npm run tauri dev
打包项目：npm run tauri build