import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import vitePluginImp from 'vite-plugin-imp' export default defineConfig({ plugins: [ reactRefresh(), vitePluginImp({ libList: [ { libName: 'antd-mobile', style(name) { return `antd-mobile/lib/${name}/style/index.css` }, }, ] }) ], resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], alias: { '@': '/src' } }, server: { proxy: { // 选项写法 '/api': { target: 'https://www.xxx.xxx', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } }, css: { postcss: { plugins: [ require('postcss-pxtorem')({ // 把px单位换算成rem单位 rootValue: 32, // 换算基数，默认100，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 propList: ['*'], //属性的选择器，*表示通用 unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。 exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法 }) ] } } })
大体也是一些基本内容：
vitePluginImp 是将 antd-mobile 进行按需加载
postcss-pxtorem 是配置移动端 px 转换的插件
server.proxy 配置项目代理
resolve.alias 配置别名，如果需要 vscode 正常识别的话，需要 ts.config 也配置一下
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] }, }
其中 antd-mobile 可以自行替换成 antd，包括 postcss 也可以根据自己的喜好替换
通过上述的简单改造，此时已经可以进行正常的小项目开发了。完结撒花！
并且已经在用此配置写了一个简单的 H5 项目，后续随着项目的迭代会逐步完善一下模板。
到此这篇关于Vite搭建React项目的方法步骤的文章就介绍到这了,更多相关Vite搭建React项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: