简介：安装vite脚手架npm install -g create-vite创建React应用create-vite my-react-app...

安装vite脚手架

npm install -g create-vite

创建React应用

执行创建命令

my-react-app： 应用名称

create-vite my-react-app

选择React

选择JavaScript

创建成功

安装依赖

运行项目

访问页面

http://localhost:5173/

打包HTML双击可正常访问

安装依赖

pnpm install @vitejs/plugin-legacy

vite.config.js参考配置（可直接替换）

/* eslint-disable no-undef */
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import legacy from "@vitejs/plugin-legacy";

const noAttr = () => {
  return {
    name: "no-attribute",
    transformIndexHtml(html) {
      // 替换掉 type="module" crossorigin 属性
      console.log(process.env.NODE_ENV);
      if (process.env.NODE_ENV === "production") {
        // 生产环境逻辑
        const replaceCross = html.replaceAll("crossorigin", "");
        const replaceTypeModule = replaceCross.replaceAll(
          'script type="module"',
          "script"
        );
        return replaceTypeModule.replaceAll("nomodule crossorigin", "");
      } else {
        // 开发环境逻辑
        const replaceCross = html.replaceAll("crossorigin", "");
        // const replaceTypeModule = replaceCross.replaceAll('script type="module"', 'script')
        return replaceCross.replaceAll("nomodule crossorigin", "");
      }
    },
  };
};

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  build: {
    chunkSizeWarningLimit: 1000, // 将警告限制提高到 1000kB
  },
  plugins: [
    react(),
    legacy({
      targets: ["chrome <= 80"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      renderLegacyChunks: true,
    }),
    noAttr(),
  ],
  // legacy({
  //   targets:["defaults","not IE 11"],
  // }),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${path.resolve(
          __dirname,
          "src/assets/css/theme.module.less"
        )}";`,
        javascriptEnabled: true,
      },
    },
  },
  optimizeDeps: {
    exclude: ["crossorigin"],
  },
  html: {
    minify: true,
    inject: {
      exclude: ["crossorigin"],
    },
  },
});

@别名

vite.config.js

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },

jsconfig.json

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

路由

安装

// 参考教程： https://reactrouter.com/home
 
pnpm add react-router react-router-dom

使用

修改main.jsx

import { createRoot } from "react-dom/client";

import { routes } from "@/routes";

createRoot(document.getElementById("root")).render(
  <RouterProvider router={routes} />
);

新增路由文件

import { createHashRouter } from "react-router-dom";

import AppLayout from "@/layouts";
import LoginIndex from "@/pages/login";
import HomeIndex from "@/pages/home";

const routes = createHashRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [
      {
        index: true,
        element: <HomeIndex />,
      },
    ],
  },
  {
    path: "login",
    element: <LoginIndex />,
  },
]);

export { routes };

引入less

安装

pnpm install less less-loader -D

配置

css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/variables.less')}";`,
        javascriptEnabled: true,
      },
    },
},

定义全局文件

// src/assets/css/variables.less

@primary-color: #1e80ff;
@secondary-color: #ff6347;
@font-color: #333;

引入acro.design

安装

pnpm i @arco-design/web-react

按需引入

安装：pnpm i @arco-plugins/vite-react -D

// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-react'

export default {
  ...
  plugins: [
    vitePluginForArco(options),
  ],
}

参考网址：https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-vite-react/README.zh-CN.md