使用 Vite2 構建 React + Antd 項目

Vite2、React、Antd

什麼是 Vite？

Vite（法語意思是 “快”，發音爲 /vit/，類似 veet）是一種全新的面向未來的前端開發服務器和構建工具。
Vite 利用瀏覽器原生 ES Module 去解析 imports，在服務器端按需編譯返回，跳過了打包的概念，服務器隨起隨用。同時不僅支持 Vue 和 React，還搞定了熱更新，而且熱更新的速度不會隨着模塊增多而變慢。針對生產環境則可以把同一份代碼用 rollup 打包。

創建項目

# 使用 npm 創建 React 模板的項目 my-vite-app
npm init @vitejs/app my-vite-app --template react

# 使用 npm 創建 React + TypeScript 模板的項目 my-vite-app
npm init @vitejs/app my-vite-app --template react-ts


# 使用 yarn 創建 React 模板的項目 my-vite-app
yarn create @vitejs/app my-vite-app --template react

# 使用 yarn 創建 React + TypeScript 模板的項目 my-vite-app
yarn create @vitejs/app my-vite-app --template react-ts

安裝 Antd

安裝

# 安裝 antd
yarn add antd
# 安裝 less
yarn add -D less

配置

// vite.config.ts

export default defineConfig({
    ...
  css: {
    preprocessorOptions: {
      less: {
        // 支持內聯 JavaScript
        javascriptEnabled: true,
        // 重寫 less 變量，定製樣式
        modifyVars: {
          '@primary-color': 'red',
        },
      },
    }
  }
})

導入樣式

// App.tsx

import 'antd/dist/antd.less'

使用 CSS 預處理器

yarn add -D sass less

安裝即可，無需插件，Vite 默認支持。

使用 CSS Module

修改 CSS 文件名爲 CSS Module 格式即可，無需配置，Vite 默認支持。

index.css --> index.module.css
index.scss --> index.module.scss
index.less --> index.module.less

全局樣式配置

// vite.config.ts

export default defineConfig({
    ...
  css: {
    preprocessorOptions: {
      scss: {
        // 自動導入全局樣式
        additionalData: "@import '@/styles/base.scss';"
      },
    }
  },
})

路徑別名

// vite.config.ts

export default defineConfig({
    ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  },
})

import Mine from "@/pages/Mine"
import Avatar from "@/components/Avatar"
import utils from "@/utils"
import baseStyle from "@/styles/base.scss"

調試

# 直接運行調試
yarn dev

# 打包
yarn build

# 預覽打包結果
yarn serve

構建發佈包

如果是發佈到服務器根目錄，那麼無需配置，直接 yarn build 打包即可。
如果是發佈到服務器子目錄，如：website，那麼需要配置兩個點：

// vite.config.ts

export default defineConfig({
  // 配置公共路徑，否則會出現資源找不到的問題
  base: "/website",
})

// 路由配置

// 配置路由根路徑，否則路由跳轉後瀏覽器上顯示的地址不包含服務器子目錄
<BrowserRouter basename="/website">
    ...
</BrowserRouter>

踩坑

Vite2 + React + Antd 踩坑指南