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项目内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: