pake 打包TodoList windows桌面应用exe

参考：
rust安装 https://blog.csdn.net/weixin_42357472/article/details/125943880

pake网址 https://github.com/tw93/Pake
支持把网页打包成多终端应用
在这里插入图片描述

离线网站打包参考：
https://github.com/tw93/Pake/wiki/Pake%E6%89%93%E5%8C%85%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E7%A4%BA%E4%BE%8B

创建项目

mkdir pake_todolistcd pake_todolistcode .

目录结构：
网页文件没有动，参考https://blog.csdn.net/weixin_42357472/article/details/140657576
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TodoList</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>TodoList</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="Enter a new task" required><button type="submit" id="add-button">Add</button></form><ul id="todo-list"></ul><script src="script.js"></script>
</body>
</html>

styles.css

body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}
h1 {text-align: center;
}
#todo-form {display: flex;margin-bottom: 20px;
}
#todo-input {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}
#add-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}
#todo-list {list-style-type: none;padding: 0;
}
.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}
.todo-item.completed {text-decoration: line-through;opacity: 0.6;
}
.todo-item input[type="checkbox"] {margin-right: 10px;
}
.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;
}

script.js

const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');function loadTodos() {chrome.storage.sync.get(['todos'], function(result) {const todos = result.todos || [];todos.forEach(todo => {addTodoToDOM(todo.text, todo.completed);});});
}function saveTodos() {const todos = Array.from(todoList.children).map(li => ({text: li.querySelector('span').textContent,completed: li.classList.contains('completed')}));chrome.storage.sync.set({todos: todos});
}function addTodoToDOM(text, completed = false) {const li = document.createElement('li');li.className = 'todo-item' + (completed ? ' completed' : '');li.innerHTML = `<input type="checkbox" ${completed ? 'checked' : ''}><span>${text}</span><button class="delete-button">Delete</button>`;li.querySelector('input[type="checkbox"]').addEventListener('change', function() {li.classList.toggle('completed');if (li.classList.contains('completed')) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}saveTodos();});li.querySelector('.delete-button').addEventListener('click', function() {li.remove();saveTodos();});if (completed) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}
}todoForm.addEventListener('submit', function(e) {e.preventDefault();if (todoInput.value.trim() === '') return;addTodoToDOM(todoInput.value);saveTodos();todoInput.value = '';
});loadTodos();

2、打包

pake打包参数文档：https://github.com/tw93/Pake/blob/master/bin/README_CN.md

icon文件制作，png转成ico格式，登录这个网址转换：https://convertio.co/zh/png-ico/

pake index.html  --name todolist --use-local-file --icon icon.ico

在这里插入图片描述

当前目录也有个msi安装包

双击可以安装

在这里插入图片描述

运行过程可能报错：wix包下载问题（下载安装314版本好像不行，这里安装311版本解决了）

参考：https://github.com/tauri-apps/tauri/issues/2616
https://github.com/tauri-apps/tauri/discussions/3770

这里解决是直接下载you need unzip the wix311-binaries.zip file to the WixTools dir； https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip and extract it to “./WixTools”
在这里插入图片描述