ViteでReactプロジェクトを構築する方法

糸作成@vitejs/app 

yarn // 依存関係をインストール yarn dev // 開発環境を起動

├── dist/ // デフォルトのビルド出力ディレクトリ └── src/ // ソースコードディレクトリ ├── asset/ // 静的リソースディレクトリ ├── config      
  ├── config.js // プロジェクトの内部業務に関わる基本設定├── components/ // 公開コンポーネントディレクトリ├── service/ // 業務リクエスト管理├── store/ // 共有ストア管理ディレクトリ├── until/ // ツール機能ディレクトリ├── pages/ // ページディレクトリ├── router/ // ルーティング設定ディレクトリ├── .main.tsx // Vite 依存関係メインエントリ├── .env // 環境変数設定├── vite.config.ts // Vite 設定選択、詳細は公式サイトの api を参照してください
└── package.json

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から { HashRouter、Route、Switch } をインポートします。
'./router/index' から routerConfig をインポートします。
'./base.less' をインポートします

ReactDOM.render() は、
 <React.StrictMode>
 <ハッシュルーター>
  <スイッチ>
  {
   routerConfig.routes.map((ルート) => {
   戻る （
    <ルートキー={route.path} {...route} />
   ）
   })
  }
  </スイッチ>
 </ハッシュルーター>
 </React.StrictMode>,
 ドキュメント.getElementById('ルート')
）

'@/pages/blogs/index' から BlogsList をインポートします。
'@/pages/blogs/detail' から BlogsDetail をインポートします。

エクスポートデフォルト{
 ルート: [
 { 正確: true、パス: '/'、コンポーネント: BlogsList },
 { 正確: true、パス: '/blogs/detail/:article_id'、コンポーネント: BlogsDetail },
 ]、
}

'./information' から * を情報としてインポートします
'./base' から * をベースとしてインポートします。

輸出 {
 情報、
 ベース
}

'../until/request' から { request } をインポートします。

定数プレフィックス = '/api'

エクスポートconst getAllInfoGzip = () => {
 リクエストを返す({
 url: `${prefix}/apis/random`,
 メソッド: 'GET'
 })
}

'qs' から qs をインポートします
「axios」からaxiosをインポートします。

インターフェースIRequest{
 url: 文字列
 パラメータ: SVGForeignObjectElement
 クエリ?: オブジェクト
 ヘッダー?: オブジェクト
 メソッド: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | 未定義
}

インターフェースIResponse{
 カウント: 数
 errorMsg: 文字列
 分類: 文字列
 データ: 任意
 詳細: 任意
 画像?: オブジェクト
}

エクスポートconst request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
 新しい Promise を返します ((resolve, reject) => {
  axios(クエリ? `${url}/?${qs.stringify(query)}`: url, {
   データ: パラメータ、
   ヘッダー: ヘッダー、
   方法: 方法、
  })
   .then(res => {
    解決(res.data)
   })
   .catch(エラー => {
    拒否(エラー)
   })
 })
}

「@/service/index」から { 情報 } をインポートします。

const { data } = information.getAllInfoGzip({ id }); を待機します。

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-react-refresh' から reactRefresh をインポートします。
'vite-plugin-imp' から vitePluginImp をインポートします

デフォルトのdefineConfigをエクスポートする({
 プラグイン: [
 反応リフレッシュ()、
 vitePluginImp({
  ライブラリリスト: [
  {
   ライブラリ名: 'antd-mobile',
   スタイル(名前) {
   `antd-mobile/lib/${name}/style/index.css` を返します
   },
  },
  ]
 })
 ]、
 解決する： {
 拡張子: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
 エイリアス: {
  '@': '/src'
 }
 },
 サーバー: {
 プロキシ： {
  // オプションの書き込み '/api': {
  ターゲット: 'https://www.xxx.xxx',
  変更元: true、
  書き換え: (path) => path.replace(/^\/api/, '')
  },
 }
 },
 css: {
 ポストcss: {
  プラグイン: [
  require('postcss-pxtorem')({ // px単位をrem単位に変換します。rootValue: 32, // 変換ベース、デフォルトは100なので、ルートタグのフォントサイズは1rem = 50pxに設定され、デザインドラフトから必要なpx数を測定し、コードで直接pxを追加できます。
   propList: ['*'], //プロパティセレクター、*は一般を示します unitPrecision: 5, //REM単位が拡張できる小数点以下の桁数と、小数点以下の桁数。
   exclude: /(node_module)/, // デフォルトは false ですが、正規表現を使用して特定のフォルダーを除外することができます (reg)})
  ]
 }
 }
})

{
 "コンパイラオプション": {
 "ベースURL": "./",
 「パス」: {
  "@/*": [
  "ソース/*"
  ]
 },
}