// 用于 axios 配置 const cOnfig= { // 默认地址请求地址，可在 .env.*** 文件中修改 baseURL: import.meta.env.VITE_API_URL as string, // 设置超时时间（ 10s ） timeout: ResultEnum.TIMEOUT as number, // 跨域时候允许携带凭证 withCredentials: true }; 

如代码所示，我改为 /api/ 后，生产环境还是能正常访问后端，我查了下 axios 的 baseURL 字段解释，是明确说了不会自己添加 ip 的，所以想请教下是什么情况

很难过 CSS 被时代淘汰（明明没有好不好！），现在我们用 Tailwind CSS 吧。

很难过 yarn 被时代淘汰，现在我们用 pnpm 吧。

1. 用 Vite 生成一个 React + TypeScript 项目

pnpm create vite my-react-app --template react-ts 

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

2. 按照提示进入项目，安装依赖：

cd my-react-app pnpm install 

3. 安装 Ant Design 相关依赖

pnpm add antd @ant-design/icons pnpm add -D less vite-plugin-imp # 用于按需引入组件 

https://ant.design/docs/react/introduce#Using-npm-or-yarn

4. 修改 vite.config.ts 为如下内容：

import { defineConfig } from 'vite'; import vitePluginImp from 'vite-plugin-imp'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), vitePluginImp({ optimize: true, libList: [ { libName: 'antd', style: (name) => `antd/es/${name}/style`, }, ], }), ], css: { preprocessorOptions: { less: { JavascriptEnabled: true, // 如需定制 antd 主题，请取消以下内容注释 https://ant.design/docs/react/customize-theme // modifyVars: { // hack: `true; @import "./src/theme.less";`, // }, }, }, }, }); 

https://vitejs.dev/config/

5. 安装 Tailwind CSS 相关依赖

pnpm add -D tailwindcss postcss autoprefixer npx tailwindcss init 

Tailwind CSS ，用过都说好！几乎不用再添加 less/scss 文件，不用切换文件改完 CSS 再切回来，直接修改组件的 className 即可，"最短修改路径"，便捷简洁现代化！（当然如果不想用可以不安装）

6. 按照 Tailwind CSS 官方指南配置

https://tailwindcss.com/docs/installation/using-postcss

注意：生成的 TypeScript 项目中，不支持 .js 配置文件，需使用 .cjs 文件。

touch postcss.config.cjs 

postcss.config.cjs 内容：

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; 

tailwind.config.cjs 内容：

/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,tsx}'], theme: { extend: {}, }, plugins: [], }; 

重命名 index.css 为 main.css，修改其内容为：

@tailwind base; @tailwind components; @tailwind utilities; 

6. 安装 ESLint 相关依赖

pnpm add -D eslint eslint-config-react-app 

https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app

虽然 create-react-app 被淘汰了，但它的 ESLint 规则还是最权威的，开发 React 项目的最佳规范！

7. 安装 Prettier 相关依赖

pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports 

https://github.com/prettier/eslint-config-prettier
https://github.com/trivago/prettier-plugin-sort-imports

@trivago/prettier-plugin-sort-imports，一个非常好用的对 import 进行自动排序的 Prettier 插件，用了就回不去了！（当然如果不想用可以不安装）

8. 添加 .eslintrc.cjs

touch .eslintrc.cjs 

module.exports = { extends: ['react-app', 'prettier'], }; 

9. 添加 .prettierrc.cjs

touch .prettierrc.cjs 

module.exports = { singleQuote: true, // 以下为 @trivago/prettier-plugin-sort-imports 配置，若未使用可删去 // importOrder 中的文件顺序规范，可依据项目实际情况自行更改 plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')], importOrder: [ '^vite', '^react', '^antd', '<THIRD_PARTY_MODULES>', 'components/', 'pages/', 'hooks/', 'utils/', '^[./]', ], importOrderSortSpecifiers: true, importOrderGroupNamespaceSpecifiers: true, importOrderCaseInsensitive: true, }; 

10. 大功告成，试试吧！

删除 App.css，修改 App.tsx 文件为：

import { useState } from 'react'; import { Button } from 'antd'; import { AlertOutlined } from '@ant-design/icons'; import reactLogo from './assets/react.svg'; function App() { const [count, setCount] = useState(0); return ( <div className="grid place-content-center h-screen text-center text-lg"> <div className="flex mx-auto items-center gap-8"> <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> <img src="http://www.v2ex.com/vite.svg" className="w-28" alt="Vite logo" /> </a> <a href="https://reactjs.org" target="_blank" rel="noreferrer"> <img src={reactLogo} className="w-32 animate-spin [animation-duration:10s]" alt="React logo" /> </a> </div> <h1 className="my-20 font-semibold text-6xl">Vite + React</h1> <div> <Button className="inline-flex items-center rounded-md" size="large" icon={<AlertOutlined />} OnClick={() => setCount((count) => count + 1)} > count is {count} </Button> <p className="mt-4 mb-12"> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="opacity-40"> Click on the Vite and React logos to learn more </p> </div> ); } export default App; 

启动项目：

pnpm run dev 

耶寺！点开本地开发链接看看效果吧！

附赠

以上 shell 命令的合订版：

pnpm create vite my-react-app --template react-ts cd my-react-app pnpm install pnpm add antd @ant-design/icons pnpm add -D less vite-plugin-imp tailwindcss postcss autoprefixer eslint eslint-config-react-app prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports npx tailwindcss init touch postcss.config.cjs touch .eslintrc.cjs touch .prettierrc.cjs 

初始构建运行

跟着官网构建完成后
yarn 拉取包后直接 yarn dev 无法运行起来
命令行显示

> Local: http://localhost:3000/ > Network: use `--host` to expose 

页面显示 Cannot GET /

原因：没有局域网中暴露服务
需要再 vite.config.ts 中添加配置

server: { host: '0.0.0.0' } 

添加后命令行显示

 > Network: http://192.168.52.1:3000/ > Network: http://192.168.142.1:3000/ > Local: http://localhost:3000/ > Network: http://172.17.12.99:3000/ 

可正常访问

配置 Eslint standard 规则

由于 vite 中没有帮我们引入 eslint 代码校验，所以我们需要自己手动配置 eslint
注意不要照抄 vue-cli 里的 .edlintrc.js 配置 其中一些引入的内容是针对 vue-cli 来的

需要安装的包

yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint -D 

各包说明

//基础的 eslit eslint //Vue 的官方 ESLint 插件 针对 vue 语法进行校验 eslint-plugin-vue // standard 规则校验 eslint-config-standard eslint-plugin-import //eslint-plugin-n 用 n 不要用 node node 停止维护了 standard 依赖会报错 eslint-plugin-n eslint-plugin-promise // 一个 ESLint 解析器，它利用 TypeScript ESTree 允许 ESLint lint TypeScript 源代码 @typescript-eslint/parser // 一个 ESLint 插件，为 TypeScript 代码库提供 lint 规则 @typescript-eslint/eslint-plugin vite-plugin-eslint // vite ESLint 插件。 

添加.eslintrc.js 文件

module.exports = { root: true, parser: 'vue-eslint-parser', extends: [ 'standard', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended' ], plugins: ['@typescript-eslint', 'vue'], env: { node: true }, parserOptions: { ecmaVersion: 2020, parser: '@typescript-eslint/parser' } } 

如果不生效检查下 vsconde eslint 插件有没有安装启用，如果安装了 看下 eslint 插件有没有报错

vue3 <script setup lang="ts"> 写法中不需要引入 defineProps 即可使用
但是 eslint 会报错 需要在配置文件中添加配置

env: { node: true, 'vue/setup-compiler-macros': true ++ }, 

之后发现新问题
发现 standard 语法规则 vscode 会报红 但是运行不会报错
发现是 vite.config.ts 中 eslintPlugin({ include: []}) 只写了 js 将 ts 补上就好了

@ 指向 src

在 vite.config.ts 中配置

 resolve: { alias: { // 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。 '@': path.resolve(__dirname, './src') } } 

没有 path 需要引入 import path from 'path'
如果 path 报引入错误 需要在 tsconfig.node.json 中 添加

"compilerOptions": { "allowSyntheticDefaultImports": true } 

如果是 ts 项目 还需要 yarn add @types/node -D
同时在 config.json 中添加

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

环境变量

vue-router

yarn add vue-router@4

css 预处理器

npm add -D stylus 官网说明
Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。
没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖
引入全局则需要 yarn add stylus-loader -D

引入全局样式在 vite.config.ts 中添加

css: { preprocessorOptions: { stylus: { imports: [ path.resolve(__dirname, './src/assets/stylus/reset.styl') ] } } } 

打包 GZIP 压缩

yarn add vite-plugin-compression -D 在 vite.config.ts 中引入 配置说明

import viteCompression from 'vite-plugin-compression' export default defineConfig({ plugins: [ viteCompression({ threshold: 100 * 1000 }) ] }) 

路由+transition

transition 内必须只有一个根元素

自动引入文件夹内文件

在之前 package 打包模式下
提供了 require.context 来进行文件夹遍历导入功能
我们在自动导入 store 中用到了

在 vite 中 没有 require.context ，vite 提供了 import.meta.glob 进行导入

蹩脚英文，见谅

本地运行起来的一切正常，打包上线后，控制台报了错误:

TypeError: Right-hand side of 'instanceof' is not an object 

调试之后发现，打包后的源码里，一个 instanceof 方法的左边是一个 div 元素对象，这个 div 对象是用来绑定画布用的容器，代码中如下：

 template: <div class="graph" ref="graphRef" id="graphRef"></div> script: const graphRef = ref<HTMLElement | null>(null); 

报错位置代码如下，图上的这些代码并不是写在项目里的，应该是打包后注入进去的：

现在问题就是不知道 打包后的这些方法使用逻辑是什么？怎么解决这个报错呢？求解