截止当前，46.6k 的 🌟 直逼 webpack。
由于维护的老项目体积较大，启动比较慢，同时需要借助 jenkins 实现自动化部署，存在多局点多分支，在构建的时候也很慢。所以尝试一下。
我用的是新版本的 Vite3，同时使用 Vite3 需要 Node.js 版本 14.18+，16+。官方说明： 搭建第一个 Vite 项目 👈
设置node版本
nvm alias default v14.18
安装依赖
npm i vite -D
npm i @vitejs/plugin-react -D
...
"devDependencies": {
"@vitejs/plugin-react": "^2.0.1",
"vite": "^3.0.9"
}
...
因为是
React项目，需要@vitejs/plugin-react插件支撑
修改命令
...
"scripts": {
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
根目录下创建 vite.config.js
import { defineConfig } from "vite";
import react from '@vitejs/plugin-react'
const { resolve } = require('path') //必须要引入resolve
export default ({ mode }) => {
return defineConfig({
plugins: [react()],
define: {
"process.env.NODE_ENV": `"${mode}"`
},
resolve: {
alias: {
"@api": resolve(__dirname, "/src/api"),
"@assets": resolve(__dirname, "/src/assets"),
"@hooks": resolve(__dirname, "/src/hooks"),
"@common": resolve(__dirname, "/src/common"),
"@store": resolve(__dirname, "/src/store"),
"@utils": resolve(__dirname, "/src/utils")
}
},
server: {
port: 6666,
strictPort: true,
open: true,
proxy: {
'/api': {
target: 'http://192.168.0.224:7777',
changeOrigin: true,
rewrite: (path) => path.replace(/\/api/, '')
}
}
},
})
}
vite 配置项 👈
修改 public 相关文件
- 将
/public/index.html移动到根目录下 - 将
%PUBLIC_URL%删掉
注：为什么这么做，官方有一个描述： index.html 与项目根目录 👈
启动
npm run start