vite搭建react项目（TypeScript）未完待续

1. 使用pnpm搭建vite项目

pnpm create vite@latest

../../.pnpm-store/v3/tmp/dlx-19008       |   +1 +                                                                                                                                                                         
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-19008/node_modules/.pnpm
../../.pnpm-store/v3/tmp/dlx-19008       | Progress: resolved 1, reused 1, downloaded 0, added 1, done
? Project name: » first_react // 这里写自己的项目名字

√ Project name: ... first_react
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React    // 选择react 回车
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript  // 选择TypeScript  回车
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

Scaffolding project in D:\workDemo\react_demo\first_react...

Done. Now run:

  cd first_react
  pnpm install
  pnpm run dev
这里代表项目创建成功，接下来进入first_react 通过pnpm install下载相关依赖

2. 关于配置

(1). 安装项目依赖

pnpm install

(2). 配置路径别名 需要安装path

pnpm install @types/node --save-dev

在vite.config.ts中修改配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{
    alias:{
      "@":resolve(__dirname,'./src')
    }
  }
})

tscondig.json中添加配置

"baseUrl": ".",
"paths": {
  "@": ["src"],
  "@/*": ["src/*"]
}

(3). 安装less

pnpm install less

在vite.config.ts中对less进行配置，方便后期在vite.config.ts中配置less全局变量

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{
    alias:{
      "@":resolve(__dirname,'./src')
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  }
})

(4). 配置项目的环境变量

根目录下新建.env.production与.env.development文件，做项目生产环境与开发环境的相关配置，针对不同环境的需求，配置不同的变量。

VITE_BASE_URL = /api
VITE_BASE_TITLE = 初见react