关于vue环境变量的使用（全面）

1、创建在根目录下
2、命名格式：命名分为 开发环境、测试环境、生产环境
一、环境变量写法方式

.env 基础系统变量，无论何种环境，都可使用其中配置的值，其他环境中的变量会覆盖.env中的同名变量。
.env.development 开发环境
.env.production 生产环境
.env.staging 测试环境

3、内容格式
例子写法：vue2 使用是以 VUE_开头
vue3使用vite进行编译，所以变量都要以 VITE_ 开头，例如.env.development中

NODE_ENV='development'
# must start with VUE_APP_ 
VUE_APP_ BB= 'development'
# 本地环境
VUE_APP_BB = '/api'  (开发环境Title)

二、使用多环境配置，package.json文件：用于build 打包配置

"scripts": {
    "dev": "vue-cli-service serve --open",
    "prod": "vue-cli-service build --mode production",
    "stage": "vue-cli-service build --mode staging",
  },

vue3 写法示例：

"scripts": {
    "dev": "vite --mode development",
    "stage": "vite --mode staging",
    "prod": "vite --mode production",
    "preview": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:stage": "vite build --mode staging"
  },

使用环境变量 import.meta.env.VITE_TITLE，当使用

npm run dev 的时候，这个值就是 开发环境Title
npm run stage 就是 测试环境Title
npm run build 默认就是生产环境

如果编译工具是webpack，那就是用process.env.VITE_TITLE （如下有示例）

三、本地代理使用： 关于proxy 的代理：
在Vue 2中，如果你想要配置Vue的代理，通常是为了解决开发中的跨域问题。你可以在Vue项目的vue.config.js文件中配置代理。如果该文件不存在，你需要新建一个。它将会将所有以/api开头的请求代理到http://api.example.com这个后端服务地址

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在这个配置中：

devServer.proxy：定义代理规则。
/api：匹配所有以/api开头的请求路径。
target：目标服务器地址，这里是http://api.example.com。
changeOrigin：设置为true时，表示更换代理的请求头中的host为target。
pathRewrite：重写路径，这里将匹配到的/api替换为空（即去除）。

确保你的请求是以/api开头的，例如/api/data，这样Vue CLI服务器就会将请求代理到配置的后端服务地址。
一般会写 ‘/api’

3.1 使用环境变量的话，是如下示例

proxy: {
      [process.env.VUE_APP_BASE_API]:{
         target: "http://api.example.com",
          ws:true,
          changOrigin:true,
          pathRewrite:{
            ['^' + process.env.VUE_APP_BASE_API]: ''
          }
      }
    }

综上所述： 环境变量 配合 本地代理 以及 打包配置， 打包运用到 baseURL 进行灵活替换！

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头，例如：
    // config.headers['Authorization'] = 'Bearer ' + userInfo.token;
    // 可以在这里根据需要对config进行处理
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只需要data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
export default service;

请求api 封装示例：

import  request  from '@/api/request'
//关于
export function list(query) {
    return request({
      url: '/api/list',
      method: 'get',
      params: query
    })
  }

vue 页面使用

import { list } from '@/api/index'
list(data).then(res=>{
// 成功回调
}).catch(erro=>{
// 失败捕获回调
})