vite: 一般的な構成

最近Viteをいじっていますが、Reactを使っているのでViteを体験するためにViteとReactを選択しました。

最も単純な方法を使用してアプリケーションを作成しyarn create vite、反応フレームワークを選択します。

vite のデフォルト設定では、defineConfig ツール関数が使用されます。

import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

js であっても ts であっても、defineConfig ツール関数を直接使用できます。dev、serve、または build コマンドに基づいて別のオプションを選択する必要がある場合は、次のような関数のエクスポートを選択します。

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

共有オプション

根

これはプロジェクトのルート ディレクトリ [index.html の場所] であり、独自のプロジェクトの仕様に従って構成できます。例えば：

const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  return {
    root,
    plugins: [react()]
  };
});

ベース

開発環境または運用環境サービスの共通ベース パス:

モード

mode は、開発モードや運用モードなどのモードを指定することです。vite.config.ts で設定されている場合、サーブ モードとビルド モードは上書きされます。

プラグイン

アプリケーションでは多くのプラグインが使用される可能性があるため、アプリケーションで使用する必要があるプラグインは配列です。vite+react のプラグインは、react です。例:

import react from "@vitejs/plugin-react";
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()]
  };
});

解決.別名

エイリアスを設定します。例: フル構成

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

const root: string = process.cwd();

// 查找路径
const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
};
// 别名
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build"),
};
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()],
    resolve: {
      alias,
    },
  };
});

サーバ

開発サーバーの構成オプション。

1. 0.0.0.0host は、開発サーバーが監視する IP アドレスを指定します。これをtrueに設定すると、デフォルトですべてのアドレスが監視されます。
2. ポート、開発サーバーのポート番号
3. strictPort を true に設定すると、ポート番号が占有されている場合、直接終了します。
4. https、HTTPSを有効にするかどうか
5. open、ブラウザでアプリケーションを自動的に開きます
6. proxy、リクエストパスのプロキシ、など

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})