1.创建配置文件

 

在项目根目录下创建 .env.环境名称 例如：.env.prd .env.dev

 

在配置文件中配置不同环境的api路径

 

# env

 

NODE_ENV = 'development'

 

# flag

 

VUE_APP_FLAG = 'dev' 

 

# domain url 接口域名、静态资源地址

 

VUE_APP_APIDOMAIN = 'http://localhost:8081'

 

VUE_APP_ASSETSURL = ''

 

2.在config目录

 

index.js : 导出当前环境配置中的地址

 

let envInfo = process.env    //process.env 获取当前启动的环境配置

 

let [apiDomain,assetsUrl] = [envInfo.VUE_APP_APIDOMAIN,envInfo.VUE_APP_ASSETSURL]  //获取配置中的值

 

export default {

 

    apiDomain,

 

    assetsUrl

 

}

 

urlMap.js ：

 

/**

 

 * @desc 远程接口地址和本地mock地址映射表

 

 * key：接口地址

 

 * value：本地地址

 

 */

 

const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'

 

export default {

 

  '/user/login': mockBaseUrl + '/223948/login',

 

  '/user/info': mockBaseUrl + '/223948/info',

 

  '/user/logout': mockBaseUrl + '/223948/logout',

 

  '/table/list': mockBaseUrl + '/223948/table-list'

 

}

 

3.写获取地址的工具方法

 

在utils目录下创建get-url.js

 

import config from '@/config' 

 

import urlMap from '@/config/urlMap'

 

/**

 

 * @desc 远程接口地址和本地mock地址映射表

 

 * key：接口地址

 

 * value：本地地址

 

 */

 

export default function getUrl(url,api=1,domainType=1){

 

    //api: 0  mock服务  1接口服务

 

    //domainType:  1取apiDomain，可自定义其他域名

 

    let domain = ''

 

    if(domainType == 1){

 

        domain = config.apiDomain

 

    }

 

    return api===0 ? urlMap[url] : domain+url

 

}

 

4.在js中导入getUrl方法，并使用

 

import request from '@/assets/js/utils/request'

 

import getUrl from '@/assets/js/utils/get-url'

 

export function getAccountList(data){

 

    return request({

 

        url: getUrl('/person/getPAList'),

 

        method: 'post',

 

        data

 

    })

 

}

 

5.request是封装axios实例

 

在utils下的request中

 

import axios from 'axios'

 

import {  MessageBox } from 'element-ui'

 

//创建axios实例

 

const service = axios.create({

 

    timeout:5000

 

})

 

//request拦截器.可以后续完善

 

service.interceptors.request.use(config=>{

 

    //do something before request is send

 

    //if(store.getters.token){

 

    //    config.headers['token'] = getToken()

 

   // }

 

    return config

 

},error=>{

 

    //do something with request error

 

    console.log(error);

 

    Promise.reject(error)

 

})

 

//response拦截器,

 

service.interceptors.response.use(

 

    response => {

 

    const res = response.data

 

    if(res.code !='0'){

 

       // if(res.code ==='4001' || res.code==='4002'){

 

       //     MessageBox.confirm();

 

       // }

 

       //自己加一些处理

 

    }else{

 

        return res.content;

 

    }

 

    }

 

)

 

export default service;

 

6.调用方法

 

由于上面例子中getAccountList方法返回的是axios实例（也就是返回了Promise对象），所以调用如下,可以使用.then 或者.catch 执行

 

  created:function(){

 

       getAccountList(this.personAccountDTO).then(result=>{

 

          this.account = result;

 

      })

 

  },

 

7.添加启动项目

 

在package.json 加上带环境配置的启动脚本dev 和prd

 

{

 

  "scripts": {

 

    "serve": "vue-cli-service serve",

 

    "build": "vue-cli-service build",

 

    "lint": "vue-cli-service lint",

 

    "dev": "vue-cli-service serve --mode dev",   

 

    "prd": "vue-cli-service serve --mode prd"

 

  },

 

  ........

 

8.启动项目

 

npm run dev   #.env.dev文件中配置生效