vue多环境配置方案

栏目: 编程语言 · 发布时间: 5年前

内容简介:前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题我们以联调环境为例 , 添加了一个.env.build_dev 文件

前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题

方案一 :

一般的情况下 , 可以使用vue-cli-service环境变量进行分环境打包 ;

开发环境 , 继续使用proxy代理 ;

需要编译的环境 , 通过设置环境变量去控制打包过程 , 最终生成适用于不同环境的前端资源 ;

有关vue-cli-service环境变量的具体解释在另一篇文章中有详解 , 这里我们只关注实现

首先 , 我们需要添加各个环境的env配置文件 , 放在项目的 根目录

vue多环境配置方案

我们以联调环境为例 , 添加了一个.env.build_dev 文件

.env.build_dev

NODE_ENV='production' //表明这是需要编译的环境(需要打包)
VUE_APP_CURRENTMODE='production' // 自定义的模式信息
VUE_APP_BASE_SERVER='http://****:8080' // 自定义的接口地址

在接口管理api.js文件中

import { fetchpost, fetchget, fetchput, fetchdelete } from "./config";
// 分环境打包
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
  baseUrl = "/base"
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = process.env.VUE_APP_BASE_SERVER
} else {
  baseUrl = ""
}

export default {
  // 登录
  login(params) {
    return fetchpost(
            `${baseUrl}/apis/v1/login`,
            params
        );
    },
  // 修改密码
  setpsw(params) {
    return fetchput(
            `${baseUrl}/apis/v1/users/password`,
            params
        );
    },
    ...........略

接下来 , 我们需要在项目的package.json文件中为联调环境添加一个编译指令 "build_dev" , 并指定编译模式

package.json

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build_dev": "vue-cli-service build --mode build_dev",
        "build_pre_release": "vue-cli-service build --mode build_pre_release",
        "build_test": "vue-cli-service build --mode build_test",
        "lint": "vue-cli-service lint"
    },

这样 , 我们通过不同的指令去编译对应环境的前端资源

方案二 :

另一种方式, 是将前端请求的服务地址抽离出来 , 放进配置文件里面 ,

开发环境 , 继续使用proxy代理 ;

需要编译的环境 , 可以直接修改编译后的文件中的配置文件

这样的好处如下:

1: 前端不需要重复进行打包编译 ;

2: 自动化部署的时候可以使用脚本去替换前端资源中的配置文件 ;

3: 如果采用前端 Docker 化 , 可以在制作镜像的过程中修改/替换配置文件 ;

首先 , 我们将config.json文件放置在public文件夹中(防止被webpack编译)

vue多环境配置方案

在里面我们简单存放一个服务地址字段

config.json

{
  "SERVER_URL": ""
}

接下来,需要保证项目开始加载前 , 我们已经获取到这个配置文件了 , 所以在main.js 里面 , 我们需要先获取这个配置文件 , 再实例化vue

mian.js

import axios from 'axios'
// vue实例
function createdVue () {
  return new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
if (process.env.NODE_ENV == 'development') {
    // 放在public文件夹下的静态文件需要通过绝对路径去获取
    axios.get('/config.json').then(res=>{
      // 开发环境通过proxy代理的形式 , 不需要获取配置地址
      Vue.prototype.SERVER_URL = ''
      createdVue()
    })
} else if (process.env.NODE_ENV == 'production') {
    // 放在public文件夹下的静态文件需要通过绝对路径去获取
    axios.get('/config.json').then(res=>{
      // 将获取到的配置文件作为全局变量保存
      Vue.prototype.SERVER_URL = res.SERVER_URL
      // 成功获取到配置后再去创建vue实例
      createdVue()
    })
  }

一般项目中 , 我们都会对axios进行统一封装 , 为axios创建一个config.js 文件 , 里面对axios请求头 , baseUrl , 请求拦截 , 各种请求方式进行配置

在这里我们为每个请求添加baseUrl

config.js

import axios from 'axios'
import Vue from "vue";
import qs from 'qs'
import Router from '@/router.js'
import {Message} from 'element-ui'
// axios.defaults.timeout = 10000     // 响应时间
// 获取全局变量中的服务地址
function getBaseUrl () {
  return Vue.prototype.SERVER_URL
}
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/json'

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 为每次请求添加baseUrl  
  config.baseURL = getBaseUrl()
  if (sessionStorage.token) {
    config.headers['Authorization'] = sessionStorage.token
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use((res) => {
  // 如果错误码!==0;抛出异常
  if (res.data.code && res.data.code !== 0) {
    switch (res.data.code) {
      case 1001:
        // 无权限
        Router.replace('/login')
        break;
      case 1003:
        // 访问身份不合法
        Router.replace('/login')
        break;
      default:
        break;
    }
    let message = res.data.msg || '出错了'
    return Promise.reject({message: message, err: res})
  } else {
    return Promise.resolve(res.data)
  }
}, (error) => {
  let message = '服务器错误'
  return Promise.reject({message: message, err: error})
})

// 返回一个Promise(发送post请求)
export function fetchpost (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}
// 返回一个Promise(发送get请求)
export function fetchget (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: params}).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

// 返回一个Promise(发送put请求)
export function fetchput (url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}
// 返回一个Promise(发送delete请求)
export function fetchdelete (url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

以上所述就是小编给大家介绍的《vue多环境配置方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法竞赛入门经典

算法竞赛入门经典

刘汝佳 / 清华大学出版社 / 2009-11 / 24.00元

《算法竞赛入门经典》是一本算法竞赛的入门教材,把C/C++语言、算法和解题有机地结合在了一起,淡化理论,注重学习方法和实践技巧。全书内容分为11章,包括程序设计入门、循环结构程序设计、数组和字符串、函数和递归、基础题目选解、数据结构基础、暴力求解法、高效算法设计、动态规划初步、数学概念与方法、图论模型与算法,覆盖了算法竞赛入门所需的主要知识点,并附有大量习题。书中的代码规范、简洁、易懂,不仅能帮助......一起来看看 《算法竞赛入门经典》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具