搭建一个vite项目相关配置

安装和初始化

yarn create vite test-vite

然后进入项目安装依赖，并启动

cd test-vite
yarn // 我是通过yarn安装依赖
npm run dev

此时访问 http://localhost:5173/ 看到 Vite + React 的界面就算成功了

以上步骤是按照ant-design的步骤来 ant-design.antgroup.com/docs/react/…

安装引入antd

yarn add antd

配置vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import MarkedPreview from 'vite-plugin-doc-preview';
import path from 'path';
const resolve = dir => path.resolve(__dirname, dir);

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-transform-react-jsx'],
      },
    }),
    MarkedPreview({ mode: 'react' }) // 页面不需要引入markDown的话，可以去掉
  ],
  resolve: {
    alias: {
      utils: resolve('src/utils'),
      components: resolve('src/components'),
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        math: "always",
        modifyVars: {
           // 此处为配置 自定义antd前缀
          'ant-prefix': 'my-prefix'
        },
        // 配置全局变量
        globalVars: {
          '@primary-color': '#07A6F0',
          'font-size-base': '14px',
        },
        // 支持内联 Javascript
        javascriptEnabled: true,
      },
      module: true
    }
  },
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.js?$/,
    exclude: []
  },
  server: {
    host: '127.8.8.1', // 指定服务器应该监听哪个IP 地址
    port: 8082, // 端口号
    open: true, // 是否自动打开浏览器
    strictPort: false, // 当true时，若端口被占用，则会直接退出
    https: false, // 是否启用 TLS + HTTP/2
    proxy: { // 配置自定义代理规则
      '/evh': {
        target: 'https://www.xxx.com/',
        changeOrigin: true,
      },
      '/api': {
        target: 'https://www.xxx.com/',
        changeOrigin: true,
      }
    }
  }
})

main.js 修改为

import React from 'react'
import * as ReactDOM from 'react-dom';
import { ConfigProvider } from 'antd'
import App from './App.js';
// 这里是引入antd样式，注意antd5.0以上版本样式文件名和以下版本不一样
import 'antd/dist/reset.css';
import './index.css';

const prefixCls = packageJson.antdConfig.prefixCls;

const container = document.getElementById('root');
// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render: Render an element to the root.
root.render(
  <React.StrictMode>
    <ConfigProvider prefixCls='my-prefix'>
      <App />
    </ConfigProvider>
  </React.StrictMode>
);

App.js 修改为，注意react-router-dom需要升级到react-router-dom6，要不然会报错

import React, { lazy } from 'react';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import './App.less';
const Home = lazy(() => import('./routes/home'));
const Login = lazy(() => import('./routes/login'));

function App() {
  return (
    <Router basename={window.__POWERED_BY_QIANKUN__ ? '/react' : '/'}>
      <div>
        <Routes>
          <Route path="/login" exact={true} element={<Login />} />
          <Route path="/home/*" element={<Home />} />
          <Route path="/*" element={<Home />} />
        </Routes>
      </div>
    </Router>
  )
}

export default App