项目从0开发的流程

开发一个项目，首先我们要看项目开发的文档，有哪些要求。

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.production

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

.env.staging

NODE_ENV='staging'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

在项目的src文件里面创建env文件

env.development.js中搭配生产环境

//生产环境
module.exports = {
     
  title: 'vue-h5-template',
  baseUrl: 'https://www.365msmk.com/api/app', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

env.production.js中搭配开发环境

//开发环境
module.exports = {
     
  title: 'vue-h5-template',
  baseUrl: 'https://www.365msmk.com', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

env.staging.js搭配测试环境

//测试环境
module.exports = {
     
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:staging.9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

index.js中配置

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

创建一个network文件

在config.js中统一管理接口

//配置接口
export const METHOD = {
     
  GET: "get",
  POST: "post",
  PUT: "put",
};

export const PATH = {
     
  login: "/login",
};

在core.js中创建axios实例并添加请求拦截器

import axios from "axios";
import {
     
  METHOD
} from "./config";
import {
     
  Toast
} from "vant";
import {
     
  baseUrl
} from "@/config";

console.log(baseUrl);
const instance = axios.create({
     
  baseURL: baseUrl,
  timeout: 5000,
});

// let loading = null;
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
     
    config.headers['Authorization'] = 'Bearer' + localStorage.getItem('token')
    Toast.loading({
     
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
    });
    return config;
  },
  function (error) {
     
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
     
    // 对响应数据做点什么
    // loading.close()
    // if (response.data.msg === "无效token") {
     
    //   router.push({
     
    //     name: "login",
    //   });
    // }
    return response;
  },
  function (error) {
     
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export function request(method, url, parmas) {
     
  switch (method) {
     
    case METHOD.GET:
      return GET(url, parmas);
    case METHOD.POST:
      return POST(url, parmas);
    case METHOD.PUT:
      return PUT(url, parmas);
  }
}
function GET(url, params) {
     
  return instance.get(url, params);
}

function POST(url, params) {
     
  return instance.post(url, params);
}

function PUT(url, params) {
     
  return instance.put(url, params);
}

在index.js中引入config.js和core.js

import {
      METHOD, PATH } from "./config";
import {
      request } from "./core";

const APIClient = {
     
  install(Vue) {
     
    Vue.prototype.$API = this;
  },
  getBanner(params) {
     
    return request(METHOD.GET, PATH.getBanner, params);
  },
 login(data) {
     
    return request(METHOD.POST, PATH.login,data);
  },
};
export default APIClient;

4、搭建项目需要的模块，比如登录模块，首页模块等等