wails + pure-admin（一）

肉小盾2026-01-26 9:10

使用pur-admin前端

创建wails项目

bash 复制代码

wails init -n myproject -t vue-ts

删除frontend整个文件夹

选一个版本

我选的是

bash 复制代码

git clone https://github.com/pure-admin/pure-admin-thin.git

得到pure-admin

改名为frontend

打开wails.json把npm 改为pnpm

ts 复制代码

{
  "$schema": "https://wails.io/schemas/config.v2.json",
  "name": "myproject",
  "outputfilename": "myproject",
  "frontend:install": "pnpm install",
  "frontend:build": "pnpm run build",
  "frontend:dev:watcher": "pnpm run dev",
  "frontend:dev:serverUrl": "auto",
  "author": {
    "name": "你自己的",
    "email": "你自己的"
  }
}

wailsjs别名修改

修改build/utils.ts

ts 复制代码

/** 设置别名 */
const alias: Record<string, string> = {
  "@": pathResolve("../src"),
  "@build": pathResolve(),
  "@wailsjs": pathResolve("../wailsjs") ----加上
};

/** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
const __APP_INFO__ = {
  pkg: { name, version, engines, dependencies, devDependencies },
  lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
};

处理修改别名后编辑器还爆红的问题

修改tsconfig.json,加上wailsjs的别名

ts 复制代码

    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": false,
    "resolveJsonModule": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@build/*": [
        "build/*"
      ],
      "@wailsjs/*": [  -----加上
        "wailsjs/*"
      ]
    },
    "types": [
      "node",
      "vite/client",

这样你就可以开开心的使用@wailsjs/*了

ts 复制代码

import { WindowFullscreen, WindowUnfullscreen, WindowIsFullscreen } from "@wailsjs/runtime";
import { useScreenStore } from "@/store/modules/screen";


const screenReset = useScreenStore()
export const toggleFullscreen = () => {
  WindowIsFullscreen().then(res =>{
    if (res.valueOf() as boolean) {
      WindowUnfullscreen();
      screenReset.isFullscreen = false;
    } else {
      WindowFullscreen();
      screenReset.isFullscreen = true
    }
  });
}