轉(zhuǎn)載請注明出處，點擊此處 查看更多精彩內(nèi)容。

什么是 Vite？

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

創(chuàng)建項目

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

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


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

# 使用 yarn 創(chuàng)建 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: {
        // 支持內(nèi)聯(lián) JavaScript
        javascriptEnabled: true,
        // 重寫 less 變量，定制樣式
        modifyVars: {
          '@primary-color': 'red',
        },
      },
    }
  }
})

導(dǎo)入樣式

// App.tsx

import 'antd/dist/antd.less'

使用 CSS 預(yù)處理器

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: {
        // 自動導(dǎo)入全局樣式
        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"

調(diào)試

# 直接運行調(diào)試
yarn dev

# 打包
yarn build

# 預(yù)覽打包結(jié)果
yarn serve

構(gòu)建發(fā)布包

如果是發(fā)布到服務(wù)器根目錄，那么無需配置，直接 yarn build 打包即可。
如果是發(fā)布到服務(wù)器子目錄，如：website，那么需要配置兩個點：

// vite.config.ts

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

// 路由配置

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

踩坑

Vite2 + React + Antd 踩坑指南