安装 和 创建项目

开启角标

// tauri.conf.json 
{
"tauri": {
"systemTray": {
            "iconPath": "icons/icon.png",
            "iconAsTemplate": true
        }
}
}

开启自定义头（拖拽 最小化 最大化 关闭）

// tauri.conf.json 
// 关闭对前端事件的限制
{
"tauri": {
"allowlist": {
            "all": true,
        }
}
}

<script setup>
    import { onMounted } from 'vue'

    import { appWindow } from '@tauri-apps/api/window'
    onMounted(() => {
        document.getElementById('titlebar-minimize').addEventListener('click', () => appWindow.minimize())
        document.getElementById('titlebar-maximize').addEventListener('click', () => appWindow.toggleMaximize())
        document.getElementById('titlebar-close').addEventListener('click', () => appWindow.close())
        console.log("onMounted------", document.getElementById('titlebar-close'));
    })
</script>

<template>
    <div class="container" data-tauri-drag-region>
        <div data-tauri-drag-region class="titlebar">
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
</template>

<style scoped>
    .logo.vite:hover {
        filter: drop-shadow(0 0 2em #747bff);
    }

    .logo.vue:hover {
        filter: drop-shadow(0 0 2em #249b73);
    }

    .drop {
        width: 100%;
        height: 50px;
        background-color: #747bff;
    }

    .titlebar {
        height: 30px;
        background: #329ea3;
        user-select: none;
        display: flex;
        justify-content: flex-end;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .titlebar-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
    }

    .titlebar-button:hover {
        background: #5bbec3;
    }
</style>

打包（1.4）

首先将压缩包下载解压到C:\Users\用户名\AppData\Local

（若解压失败 请将后缀改为.zip）

npm run tauir build