0


react中一些vite常见配置

使用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.alias

import { 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.preprocessorOptions

import { 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的配置的一点总结


本文转载自: https://blog.csdn.net/g__zq__/article/details/127289416
版权归原作者 不知名秋刀鱼 所有, 如有侵权,请联系我们删除。

“react中一些vite常见配置”的评论:

还没有评论