创建 Tauri + Vue + Typescript + Vite + Less 应用

更新：本文内容已不适用于最新版本，若遇到相同问题可以继续参考。要创建项目首先按https://tauri.studio/docs/getting-started/prerequisites/配置环境，然后参考https://github.com/niuiic/develop-tools中关于 tauri 的内容。

项目创建流程

直接上代码

app_init.sh

templatePath=xxx
echo "What's your app's name?"
read appName
yarn create @vitejs/app $appName --template vue-ts
cd $appName
yarn set version berry
cp "$templatePath/tauri/yarnrc.yml" .yarnrc.yml
yarn install
yarn add less -D
yarn add eslint eslint-plugin-vue -D
yarn add @vuedx/typescript-plugin-vue -D
rm ./tsconfig.json
cp "$templatePath/tauri/tsconfig.json" tsconfig.json
rm src/shims-vue.d.ts
rm vite.config.ts
cp "$templatePath/tauri/vite.config.ts" vite.config.ts
cp "$templatePath/tauri/tauri-plugin.ts" tauri-plugin.ts
yarn add tauri @types/sharp
yarn add @rollup/plugin-replace -D
yarn tauri init

$templatePath自定，注意模板文件在$templatePath/tauri下。

以上涉及的几个文件放在下面。

yarnrc.yml

yarnPath: ".yarn/releases/yarn-berry.cjs"
nodeLinker: node-modules
npmRegistryServer: "https://registry.npm.taobao.org/"

tauri-plugin.ts

import { TauriConfig } from "tauri/src/types";
import type { Plugin, ConfigEnv, ResolvedConfig } from "vite";
import tauriConf from "./src-tauri/tauri.conf.json";
import dev from "tauri/dist/api/dev";
import build from "tauri/dist/api/build";
import replace from "@rollup/plugin-replace";
import { isAbsolute, resolve } from "path";

interface Options {
  config?: (c: TauriConfig, e: ConfigEnv) => TauriConfig;
}

export default (options?: Options): Plugin => {
  let tauriConfig = { ...tauriConf };
  let viteConfig: ResolvedConfig;
  return {
    ...replace({
      "process.env.IS_TAURI": true,
    }),
    name: "tauri-plugin",
    configureServer(server) {
      server.httpServer.on("listening", () => {
        if (!process.env.TAURI_SERVE) {
          process.env.TAURI_SERVE = "true";
          const serverOptions = server.config.server || {};
          let port = serverOptions.port || 3000;
          let hostname = serverOptions.host || "localhost";
          if (hostname === "0.0.0.0") {
            hostname = "localhost";
          }
          const protocol = serverOptions.https ? "https" : "http";
          const base = server.config.base;
          const url = `${protocol}://${hostname}:${port}${base}`;
          tauriConfig.build.devPath = url;
          dev(tauriConfig);
        }
      });
    },
    closeBundle() {
      if (!process.env.TAURI_BUILD) {
        process.env.TAURI_BUILD = "true";
        let distDir = viteConfig.build.outDir;
        if (!isAbsolute(distDir)) {
          distDir = resolve(viteConfig.root, distDir);
        }
        tauriConfig.build.distDir = distDir;
        return build(tauriConfig);
      }
    },
    config(viteConfig, env) {
      process.env.IS_TAURI = "true";
      if (options && options.config) {
        options.config(tauriConfig, env);
      }
      if (env.command === "build") {
        viteConfig.base = "/";
      }
    },
    configResolved(resolvedConfig) {
      viteConfig = resolvedConfig;
    },
  };
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "plugins": [
      {
        "name": "@vuedx/typescript-plugin-vue"
      },
      {
        "name": "eslint-plugin-vue"
      }
    ],
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tauri from "./tauri-plugin";

export default defineConfig({
  plugins: [vue(), tauri()],
  server: {
    hmr: { overlay: false },
  },
  resolve: {
    alias: { vue: "vue/dist/vue.esm-bundler.js" },
  },
});