Tauri 创建前端

Vite 是一个前端构建包，它在开发过程中提供了各种“生活质量”功能，例如 热模块重载 (HMR)。 在构建生产环境时，它也会将你的源代码转换成最优化的 HTML、CSS 和 JavaScript。 我们推荐使用快速、易配置、拥有 丰富插件生态的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 模板来创建一个 没有 任何前端框架的简单项目。

• npm

npm create vite@latest

• Yarn

yarn create vite

• pnpm

pnpm create vite

1. 项目名称这将是您的 JavaScript 项目的名称。 对应此工具将创建的文件夹的名称，但在其他方面对你的应用没有影响。 您可以在此处填写任何您想要的名称。
2. 选择一个框架如果您计划之后使用一个前端框架，您可以在这儿选择它。 对于本指南，我们假设您选择 原生。
3. 选择一个语言Vite 为所有模版提供了 TypeScript 和原生JavaScript两种语言，你可以在这里进行选择。 我们强烈推荐TypeScript ，因为它有助于您编写更安全、更快和更有效的代码。 对于本指南，我们假设您选择 原生typescript。

当通过 vite 命令启动前端时，Vite 将在项目根目录中寻找名为 vite.config.ts 的配置文件。 我们想要自定义此文件以获得与 Tauri的最佳兼容性。 如果它不是由上面的脚手架创建的(例如如果你正在使用原版的 JavaScript)，你可能需要创建 vite.config.ts 文件。

用以下内容更新文件：

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,
    // 为调试构建生成源代码映射 (sourcemap)
    sourcemap: !!process.env.TAURI_DEBUG,
  },
})

信息
请注意，如果您没有使用原生 JavaScript，您必须保留已经存在于这个文件中的特定框架插件。