Tauri 創(chuàng)建前端

Vite 是一個前端構(gòu)建包，它在開發(fā)過程中提供了各種“生活質(zhì)量”功能，例如 熱模塊重載 (HMR)。 在構(gòu)建生產(chǎn)環(huán)境時，它也會將你的源代碼轉(zhuǎn)換成最優(yōu)化的 HTML、CSS 和 JavaScript。 我們推薦使用快速、易配置、擁有 豐富插件生態(tài)的Vite。

Vite comes with a scaffolding utility similar to create-tauri-app that can quickly set up a new project from many pre-defined templates. 您可以從許多前端框架中選擇，如 React、Svelte 或 Vue。 在本指南中，我們將選擇 vanilla-ts 模板來創(chuàng)建一個 沒有 任何前端框架的簡單項目。

• npm

npm create vite@latest

• Yarn

yarn create vite

• pnpm

pnpm create vite

1. 項目名稱這將是您的 JavaScript 項目的名稱。 對應此工具將創(chuàng)建的文件夾的名稱，但在其他方面對你的應用沒有影響。 您可以在此處填寫任何您想要的名稱。
2. 選擇一個框架如果您計劃之后使用一個前端框架，您可以在這兒選擇它。 對于本指南，我們假設您選擇 原生。
3. 選擇一個語言Vite 為所有模版提供了 TypeScript 和原生JavaScript兩種語言，你可以在這里進行選擇。 我們強烈推薦TypeScript ，因為它有助于您編寫更安全、更快和更有效的代碼。 對于本指南，我們假設您選擇 原生typescript。

當通過 vite 命令啟動前端時，Vite 將在項目根目錄中尋找名為 vite.config.ts 的配置文件。 我們想要自定義此文件以獲得與 Tauri的最佳兼容性。 如果它不是由上面的腳手架創(chuàng)建的(例如如果你正在使用原版的 JavaScript)，你可能需要創(chuàng)建 vite.config.ts 文件。

用以下內(nèi)容更新文件：

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  // prevent vite from obscuring rust errors
  clearScreen: false,
  // Tauri expects a fixed port, fail if that port is not available
  server: {
    strictPort: true,
  },
  // to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
  // `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
  // env variables
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    // Tauri uses Chromium on Windows and WebKit on macOS and Linux
    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // 為調(diào)試構(gòu)建生成源代碼映射 (sourcemap)
    sourcemap: !!process.env.TAURI_DEBUG,
  },
})

信息
請注意，如果您沒有使用原生 JavaScript，您必須保留已經(jīng)存在于這個文件中的特定框架插件。