Vue项目中的环境隔离配置

Vue项目中的环境隔离配置

• 开发环境
  • 所有的开发者都在自己的电脑上完成
• 测试环境
  • 一般会写的项目打包放入到测试服务进行整体测试，如果有问题一般会问题（bug）提交禅道。然后给所以得开发进行问题回归和解决，
• 生产环境
  • 如果测试完毕，就开发发布生产环境，投放使用。

这里存在问题，开发阶段大部分情况下都是链接用户或者公司内部的服务。测试环境和生产环境肯定又另外一个服务。因为前后端分离的开模式，其实服务端就是提供一个所谓这种：http://www.xxx.com/api/xxx/aaa地址。

假设：

dev 开发环境：

API_URL = http://127.0.0.1:8088/api

test 测试环境

API_URL = http://test.xxx.com/api

prod 生产环境

API_URL = http://www.XXX.com/api

我马某人现在在团队，正在开发社区项目，社区项目肯定很多接口：如下：

• 接口已经定义，社区列表查询
• 接口的名字：/api/social/get/list
• 接口请求方式：post
• 接口的返回值：{totla:1,records:[{}],}

环境变量和模式

参考：https://cn.vitejs.dev/guide/env-and-mode.html

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

1：在项目的跟目录下新建两个环境文件

• .env.producation 生产环境文件
• .env.development 开发环境文件

2: 激活环境mode

• 在package.json中，开始配置你需要激活的环境

  "scripts": {
      "dev": "vite --mode development", 
      "build": "vite build --mode producation"
    },
  

  上面代码的意思是：

  • 如果你执行 npm run dev 就会自动找到环境文件 .env.development 进行加载
  • 如果你执行 npm run build就会自动找到环境文件 .env.producation 进行加载

  3： 如何获取环境变量的文件内部的信息呢？

export default {
   
    // 社区查询
    listSocial(){
        console.log("import.meta.env",import.meta.env.VITE_APIURL)    
    }
}

如何封装Axios异步请求完成第一个接口的调用和服务代理配置

远程接口调用利器

axios

官网

https://www.axios-http.cn/

安装

npm install axios
yarn add axios
pnpm install axios

示例

 import  axios from 'axios'

export default {
    // 社区查询
    listSocial(params){
        return axios.post(`${import.meta.env.VITE_APIURL}/social/get/list`,params)
    },
    // 根据ID查询明细
    getSocial(id){
        return axios.get(`${import.meta.env.VITE_APIURL}/social/get/${id}`)
    },
    //保存方法
    saveSocial(data){
        return axios.post(`${import.meta.env.VITE_APIURL}/social/get/save`,data)
    }
}

解答问题1： 在开放中为什么都定义一层api呢？

其实异步请求，本质就是调用服务端提供的地址，这个地方就会你想要数据。返回数据以后其实应该在spa/sfc就可以直接去渲染使用了。那么为什么还要封装这一层api。但是：复用。

Axios 实例

axios实例是什么，就告诉你可以自己去封装一个异步请求对象，达到和axios一样的功能。

• axios.get()
• axios.post()

假设我封装了一个request的异步请求对象，那么执行的方式就:

• request.get()
• request.post()

那为什么要封装呢？

封装以后，可以对你请求的地址进行拦截处理。

• 可以在请求之前参数或者校验等进行处理
• 可以在请求之后对你结果进行处理

import axios from 'axios'

// 创建实例，设置默认值
const request = axios.create({
    // 这个就每个异步请求的基础地址，但是你异步请求地址必须是相对路径。
    // 如果异步请求地址是一个完全的http、https的路径，baseURL会自动忽略
    baseURL: import.meta.env.VITE_APIURL,
    // 请求接口的最大等待时间，如果超过直接断开
    timeout: 10000,
    // 统一给请求头设置token
    //headers: {'Authorization': 'tokenvalue1234567890'}
});


// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 设置动态参数
    config.headers["Authorization"] = "atokenvalue1234567890"
    config.headers["X-Requested-With"]= 'XMLHttpRequest',
    config.headers["screat"] = "1"
    config.headers["device"] = "h5"
    // 对get/post请求进行处理
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    if(response.data.code == "601"){
        //route.push("/login",{redirect:true})
        return;
    }
    return response.data;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    if(error.code == 'ERR_NETWORK'){
        alert("服务离开地球表面了...");
    }
    // 对响应错误做点什么
    return Promise.reject(error);
  });


export default request;

如何整合Element-plus

官网

• vue3: https://doc-archive.element-plus.org/
• vue2 : https://element.eleme.io/

安装

npm install element-plus 
yarn add element-plus 
pnpm install element-plus 

注册element-plus

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入element-plus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
const app = createApp(App)

// 注册element-plush
app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.mount('#app')