vue3接口环境配置

前言

vue项目开发，会经历本地测试、打包、生产过程，其中不同阶段需要调试的api接口环境不同，要根据具体来设置。其实主要就是两个方面，配置‘本地运行’和‘打包运行’的api接口环境。

vue3项目的配置

• vue3项目没有了config文件夹，需要在项目的根目录下创建相关文件

(1) 根目下创建指定文件
在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod） 文件命名： .env.dev , .env.test , .env.prod

(2) 刚刚创建的三个文件对应的内容代码

• .env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'

• .env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'

• .env.test

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '测试环境api地址'

(3) 修改package.json脚本

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev":"vue-cli-service serve --mode dev",//本地运行命名
    "build:test":"vue-cli-service build --mode test",//测试环境打包命名
    "build:pro":"vue-cli-service build --mode prod"//正式环境打包命名
  },

(4) 项目中使用环境变量

// 任意地方都可以使用
console.log(process.env.VUE_APP_BASEURL)

(5) 运行命令

本地开发启动命令：npm run dev
测试环境打包：npm run build:test
正式环境打包：npm run build:pro

正式配置请求环境

1.项目根目录创建环境变量代码和指定文件

本地运行环境
(1) .env.dev

# 本地环境
NODE_ENV = 'development'
# 本地环境模块名
VUE_APP_CURRENTMODE = 'dev'
# 本地环境，api前缀
VUE_APP_BASE_API = '/api'
# 本地测试环境，url地址
VUE_APP_BASE_URL = '本地开发api地址'

本地运行测试环境
(2).env.dev_test

# 本地测试环境
NODE_ENV = 'development'
# 本地测试环境模块名
VUE_APP_CURRENTMODE = 'dev_test'
# 本地测试环境，api前缀
VUE_APP_BASE_API = '/api'
# 本地测试环境，url地址
VUE_APP_BASE_URL = '本地测试开发api地址'

打包正式环境
(3).env.prod

# 线上环境
NODE_ENV = 'production'
# 线上环境模块名
VUE_APP_CURRENTMODE = 'prod'
# 线上环境，api前缀
VUE_APP_BASE_API = '/api_production'
# 线上环境，url地址
VUE_APP_BASE_URL = '线上正式环境api地址'

打包测试环境
(4).env.prod_test

# 线上环境
NODE_ENV = 'production'
# 线上测试环境模块名
VUE_APP_CURRENTMODE = 'prod'
# 线上测试环境，api前缀
VUE_APP_BASE_API = '/api_test'
# 线上测试环境，url地址
VUE_APP_BASE_URL = '线上测试环境api地址'

项目结构如下

2.项目根目录创建vue.config.js，配置反向代理解决跨域

当前配置可以解决请求跨域 和打包页面白板

module.exports = {
    // 设置代理（解决请求跨域）
    devServer:{
        host: '0.0.0.0',  //本地地址
        port: 8080,       //自定义端口
        https: false,     //false关门https,true为开启
        open: false,      //自动打开浏览器
        proxy:{
            [process.env.VUE_APP_BASE_API]:{
                target: process.env.VUE_APP_BASE_URL,
                ws: true,
                changeOrigin: true,
                pathRewrite:{
                    ['^'+process.env.VUE_APP_BASE_API]:''
                }
            }
        }
    },
    // 解决打包页面白板
    publicPath: "./"
}

3.封装axios配置环境变量，让请求本地运行的时候走代理服务器 发布线上的时候同时也可以兼容

src/utils/request.js

import axios from 'axios'
const service = axios.create({
    baseURL: process.env.NODE_ENV==='development'?process.env.VUE_APP_BASE_API:process.env.VUE_APP_BASE_URL,
    timeout: 5000  
})
// 不需要token验证的 接口白名单
// const APIWhite = ['users/login']
// 请求拦截 设置统一header
service.interceptors.request.use(
    config =>{
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
// 响应拦截 401 token过期等处理
service.interceptors.response.user(
    response =>{
        return response
    },
    error =>{
        return Promise.reject(error)
    }
)
export default service

api封装管理（vue3不能像vue2一样在main.js挂载全局变量）
scr/api/index.js

import request from '@/utils/request'
// 登录
export function doLogin (data) {
    return request({url: '/index/envtest',method: 'POST', data})
}

页面调用

import { doLogin } from '../api/index'
doLogin({},res=>{
    console.log(res);
})

结果如下：