vue elementui 公司组织架构图 vue项目的组织架构

vue创建项目架构

我们在创建一个新项目的时候肯定要搭建一个架构

1.我们先创建运行环境

production生产环境 development开发环境 test测试环境

然后可以在里面写些不同环境的变量问题

.env.test文件夹下面

NODE_ENV='test' //这个是自带内置原有的变量名，自定义的变量名都需要加上VUE_APP_变量名
VUE_APP_MODE='test'	//这个变量名可以在启动项目的时候使用--mode进行不同环境项目启动命令
VUE_APP_URL='www.baidu3.com'	//不同环境下的url地址

package.json下面的脚本语言

"dev": "vue-cli-service serve --mode development",
  "pro": "vue-cli-service serve --mode production",
  "test": "vue-cli-service serve --mode test"  //三个环境下的启动命令，也可以写成serve:test这种形式，包括打包

注意 ：然后在进行vue.config.js的基础配置，这里面的运行是基于node.js的运行环境所以打印的是后台窗口那里

这样环境变量就创建好了

这里简单提下，习惯把main的文件下面的链式语法拆分，这样后期可以直接挂载

2.封装axios请求

• 首先我们先创建一个api文件，下面创建一个http.js文件夹
  http.js文件夹就是axios请求的二次封装

import axios from "axios"; //导入axios
import qs from "qs"; //qs的作用是把参数是对象形式{age:18,sex:'男'}的变成age=18&sex='男'的形式
/*
	*根据环境变量区分接口地址
*/

switch (process.env.NODE_ENV) {
	case "production":
		console.log(1);
		// axios.defaults.baseURL=''   //生产环境的地址
		break;
	case "test":
		console.log(2);
		// axios.defaults.baseURL=''   //测试环境的地址
		break;
	default:
		console.log(3);
		// axios.defaults.baseURL=''   //开发环境的地址
		break;
}
/*
*设置超时时间和跨域是否允许携带凭证
 */
axios.defaults.timeout = 100000;//访问时间
axios.defaults.withCredentials = true;//是否允许访问带令牌，跨域

/**
 * 设置请求传递数据的格式
 */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlenconded';//设置请求头age=18&name="zjb"  
//下面这个针对post请求
axios.defaults.transformRequest = data => qs.stringify(data);//这个是把对象形式变成xxx=xxx
/**
 * 设置请求拦截器
 * token校验（JWT），接收到服务器返回的token存储到vuex/本地存储中，
 */

axios.interceptors.request.use(config => {
	//携带上token
	let token = localStorage.getItem('token');//假设token存储在本地
	token && (config.headers.Authorization = token);
	return config
}, error => {
	return Promise.reject(error)
});
/**
 * 设置响应拦截器
 */
// axios.defaults.validateStatus=status=>{
// 	//自定义响应成功的http状态码
// 	return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(res => {
	return res.data
}, error => {
	let { res } = error
	if (res) {
		//服务器返回有结果 下面去判断每个状态码做的事
		
	} else {
		//服务结果都没有返回 1.服务器崩了2.断网
		if (!window.navigator.onLine) {
			//断网处理
			return;
		}
		//服务器问题
		return Promise.reject(error)
	}
})
export default axios;

3.接下来开始分模块引用

在创建一个api.js
导入模块的请求 统一到处

/**
 * 定义数据请求的唯一入口
 */
import login from './login'
export default {
  login
}

login文件夹下面的请求

import axios from './http'
function login(){
  return axios.post('/login',{
    // 参数
    xxx:'xxx'
  })
}
export default {login}

最后把api绑定在原型链上就好了

app.config.globalProperties.$api = axiosHttp