1.生产环境(production)和开发环境(development)配置

1).在根目录下建文件.env.production

NODE_ENV='production'
VUE_APP_MODE='production'
VUE_APP_API_URL='http://xxxxx' //上线nginx所在地址（处理跨域问题）

到时上线了，前端项目是以静态资源的形式放在nginx下，有nginx代理转发请求；因此前端写的请求地址写成nginx所在的地址，前端静态资源地址（nginx所在的地址）-->请求地址写nginx所在地址===看起来是同一个地址，因此不会存在跨域

注：请求地址虽然写的是nginx所在地址，但nginx会做转发代理到真实后端接口

2）在根目录下建文.env.development

NODE_ENV='development'
VUE_APP_MODE='development'
VUE_APP_API_URL='http://localhost:8081'

当前前端地址-->请求当前前端地址===看起来是同一个地址，因此不会存在跨域

注：请求地址虽然写的是当前前端地址，但配置proxy会做转发代理到真实后端接口

2.vue.config.js配置开发环境跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 输出文件目录
  outputDir: 'dist',
  transpileDependencies: true,
  devServer: {
    port:9000,
    proxy: {//再配置一个代理程序:
      '/api': {
        target: `http://xxxxx`,//后端接口地址
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/api': '/'  // 根据之前vuejs的配置，用来拿掉URL上的（/api）
        }
      }
    }
  }
})

3.在api中配置baseURL及统一封装请求

import axios from "axios";
import router from '../router'
// 不同环境不同地址
const apis = {
  production: 'http://xxxx', // 线上地址 (生产环境)
  development: 'http://localhost:9000', // 本地 (开发环境)
}
// ajax请求设置
const ajax = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? apis.production : apis.development
})

// 封装post请求
export const postRequest = (url, params) => {
  return ajax({
    method: 'post',
    url: `/api${url}`,
    data: params
  })
}
// 封装put请求
export const putRequest=(url,params)=>{
  return ajax({
    method: 'put',
    url: `/api${url}`,
    data: params
  })
}
// 封装get请求
export const getRequest=(url,params)=>{
  return ajax({
    method: 'get',
    url: `/api${url}`,
    data: params
  })
}
// 封装delete请求
export const deleteRequest=(url,params)=>{
  return ajax({
    method: 'delete',
    url: `/api${url}`,
    data: params
  })
}

api标识的作用

生产环境(production)下:

比如ngnix所在地址为http://127.51.81.174:80

ngnix发现请求地址为http://127.51.81.174:80就会请求前端资源

ngnix发现请求地址为http://127.51.81.174:80/api发现带api就会做代理转发，去请求后端资源（当然这需要后端配置好）

开发环境（development）下:

proxy: {//再配置一个代理程序:
      '/api': {
        target: `http://xxxxx`,//后端接口地址
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/api': '/'  // 根据之前vuejs的配置，用来拿掉URL上的（/api）
        }
      }

同样发现api会做代理转发