VITE+VUE3 跨域环境变量配置

一、 在项目根目录下新建以下三个文件

1)  .env (全局默认配置环境)

2)  .env.development (开发环境， 对应npm run dev)

3) .env.production (生产环境，对应npm run build)

二、 分别在.env.development,.env.production 写入环境变量

1) .env.development

// .env.production

VITE_APP_TITLE = "线上版本"
VITE_BASE_URL = "https://xxx.xxx.xxx(根据项目实际情况配置)"

2) .env.development

// .env.development

VITE_APP_TITLE = "开发版本"
VITE_BASE_URL = "https://xxx.xxx.xxx(根据项目实际情况配置)"

根据项目实际情况，加入所需要的变量，变量命名以VITE_为开头 

在vue文件中获取环境变量的方法

// .vue文件获取环境变量

console.log(import.meta.env)
console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_BASE_URL)

 在vite.config.ts中获取环境变量的方法

import { defineConfig, loadEnv } from 'vite'

import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';

// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  console.log(env.VITE_APP_TITLE, env.VITE_BASE_URL)
  return {
    plugins: [vue(),styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
      }
    },
    base: './', // 设置打包路径
    server: {
      port: 4000, // 设置服务启动端口号
      open: true, // 设置服务启动时是否自动打开浏览器
      cors: true, // 允许跨域
  
      // 设置代理，根据我们项目实际情况配置
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL, // 环境变量
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace('/api/', '')
        }
      }
    }
  }
})

三、线上环境(npm run build以后)跨域问题处理

在axios中，判断当前环境后再请求前配置好baseUrl

import axios from 'axios'

var http = axios.create({
  timeout: 1000 * 20,
  baseURL: import.meta.env.DEV? '': import.meta.env.VITE_BASE_URL
})

// 请求响应器
http.interceptors.request.use(
  (config) => {
    return config
  },
  function (error) {
    // 返回错误信息
    return Promise.reject(error)
  }
)

http.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error.response)
  }
)

export default http