位置: IT常识 - 正文
react中一些vite常见配置(reactvate)
编辑：rootadmin推荐整理分享react中一些vite常见配置(reactvate)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react veu,react eventemitter,react either,react veu,react.strictmode,react eventemitter,react.strictmode,react veu,内容如对您有帮助，希望把文章链接给更多的朋友！
使用vite，首先要在项目根目录创建vite.config.js的文件，如果使用ts的话，也可以是.ts文件。 这里其实重点想要说的是，vite属于新兴的工具，所以对于他的配置项，我们必然是很陌生的，但是官方很贴心的，给我们提供了方案——一个可以给出配置提示的方法：
import { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()],})如上，只要引用defineConfig，包裹vite的config，你在键入options的时候，就可以看到提示啦。 还有需要注意的一点，vite内置less，和sass，但是如果使用默认配置，那么在给less，和sass文件起名字的时候，文件名后缀要使用.module.less,这样vite才能正确识别
项目中实用、常用配置文件别名配置resolve.aliasimport { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()], resolve: { alias: [ { find: "src", replacement: path.resolve(__dirname,'src') }, ] },})less设置全局变量css.preprocessorOptionsimport { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()], css: { preprocessorOptions: { less: { additionalData: `@import "${path.resolve(__dirname, 'src/theme.module.less')}";`, javascriptEnabled: true, } }, },})打包打包这里问题比较多，首先要确定自己的项目，是什么场景。比如：是一个完成的应用，需要将html打包进项目的，可以使用默认配置。如果自己的项目是SDK，或者是一个react组件。那么就需要使用另外一种库模式来打包。还有node环境的npm包，比如脚手架之类需要执行某些node命令行的配置，都会有所不同
常规配置-rollupOptions一般的打包配置，可以使用rollupOptions，这部分具体有什么配置项，有哪些参数，我这里偷个懒，大家可以去rollup官方文档去查（虽然我知道这样比较烦人，但是这部分比较容易查，所以就不写啦，我重点写一点，不太容易查到的配置） 这里只分享一个我遇到的，更改css构建产物文件名的配置
import { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()], build: { rollupOptions: { output:{ entryFileNames: `[name].${timestamp}.js`, chunkFileNames: `[name].${timestamp}.js`, // css文件名 assetFileNames: `[name].${timestamp}.[ext]` // 比如你想构建出来的css为dist/index.css，那么你可以这样 // assetFileNames: `index.[ext]` }} },})库模式这个模式适用于，打包一个不含html文件的场景
import { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()], build: { lib: { // 入口文件 entry: path.resolve(__dirname, 'src/index.tsx'), // umd、iife的格式vite要求必须要有name作为导出的全局变量 name: "SpecialEffect", // 导出格式，默认为["iife","umd"] formats: ['iife'], // js打包名称，当然这部分官方文档更加详细 fileName: () => "index.js" },// umd格式下，支持将不需要打包的第三方库，排除在外，并指定全部环境// 提供的全局变量代替，比如以下的例子，不将react打包，由全局React// 变量提供react库rollupOptions: { external: ['react'], output: { globals: { react: 'React' } } } },})本地开发服务器的配置import { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'import path from 'path';export default defineConfig({ plugins: [reactRefresh()], server: { // 端口 port: 3000, // 是否开启https服务 https: true, // 代理 proxy: { '/project/delete': { target: 'https://www.bdsc.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/project\/delete/, '') }, '/project/update': { target: 'https://www.bdsc.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/project\/update/, '') }, } },})proxy{proxy:{'api':{target: 'https://www.bdsc.com', changeOrigin: true, rewrite: (path) => path.replace(/^\api/, '')}}}
以上配置可以解决proxy百分之九十的问题，但是这个含义却很少有人讲的清楚。 首先 "api"这个是一个标识符，虽然很多接口会提供给你类似这样的'www.bdsc.com/api/materia…
我还是拿www.bdsc.com/api/materia…
首先我们需要向本地开发服务发起请求，然后本地开发服务器请求地址www.bdsc.com/api/materia…
发起请求的方式是，我们通过proxy定义一个标识符，例如aaa，然后在本地开发服务器的地址拼接上标识符aaa。也就是localhost:3000/aaa，这样就可以对本地开发服务器发起请求了。当你发起这个请求，本地开发服务器要做什么呢？他会根据配置中的target字段的地址，也就是www.bdsc.com，拼接上aaa标识符，然后再拼接上/api/materia… rewrite字段中，将aaa这个标识符，替换为空的字符串。那么这样得到的最终地址就是www.bdsc.com/api/materia…
当然这个标识符你不想自定义，想要使用接口中的那个api字段行不行呢，当然也可以，最后不需要rewrite就好了
上面说了一大堆。字有点多，可能也少有人耐心看。下面我就从头到位的说一下具体做法，代码：
import axios from 'axios';import env from './env';// env 环境变量，这里必须要判断当前的环境。本地开发，还是在生产、日常、预发等// 是否是本地环境const isLocal = env === "LOCAL"// 本地开发baseURL使用标识符，浏览器会自动添加域名，也就是本地开发服务器的域名const baseURL = isLocal ? "aaa" : "https://www.bdsc.com"axios({baseURL,url:"api/material",method:"GET",params:{}}).then(res => {// 发起请求})如果是本地环境，那么上面实际请求的地址就是类似http://localhost:3000/aaa/api/material这种地址
下面proxy的配置
{proxy:{'aaa':{target: 'https://www.bdsc.com', changeOrigin: true, rewrite: (path) => path.replace(/^\aaa/, '')}}}当本地服务器收到http://localhost:3000/aaa/api/material的请求，便会将localhost:3000替换为target：https://www.bdsc.com的到https://www.bdsc.com/aaa/api/material, 然后再根据rewrite的配置，将aaa替换为空字符串。得到www.bdsc.com/api/materia…
以上是关于vite的配置的一点总结
上一篇：基于Java+SpringBoot+Vue+uniapp微信小程序零食商城系统设计和实现
下一篇：Vue中的methods方法使用技巧,三分钟迅速读懂(vue中methods的作用)
