如何配置跨域，代理域名

不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理

server: {
          
   
    proxy: {
          
   
      /api: {
          
   
        target: https://baidu.com,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, )
      }
    }
 },

区分开发环境和生产环境，以及预发布环境

在根目录创建 .env[mode] 文件，在项目执行 npm run dev 的时候vite会自动去读取.env.development文件里面的配置，执行npm runbuild进行打包之后也会自动将.env.production的内容打包进去，这里注意的是，如果你想进入预发布模式的话需要在打包的时候进行mode配置:npm run build --mode staging 公共的 .env 开发环境 .env.development 生产环境 .env.production 预发布环境 .env.staging

在.env.development配置了一个域名:

`.env.development`
// 开发环境配置
VITE_BASIC_URL = https://basic.com

可以做什么事

针对不同的环境可以去配置，例如页面的统一标题，参数常量… 下面根据环境配置不同的请求域名👇

import {
          
    defineConfig, loadEnv } from vite
export default defineConfig(({
          
    mode }) => {
          
   
  // 获取当前环境的配置
  const config = loadEnv(mode, ./)
  return {
          
   
    server: {
          
   
      proxy: {
          
   
        /basice: {
          
   
          target: config.VITE_BASIC_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/basice/, )
        }
      }
    },
  }
})

以上是vite.config.js的配置，上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域