欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义环境变量 和 axios 封装 全局变量的定义和引用

程序员文章站 2024-02-15 21:51:53
...

定义环境变量的官网地址:https://cli.vuejs.org/zh/guide/mode-and-env.html

定义环境变量:https://blog.csdn.net/Amy_cloud/article/details/92638555

定义环境变量:https://blog.csdn.net/zhangyun1107892254/article/details/93203381?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.channel_param

全局变量的定义和引用:https://www.jianshu.com/p/7e2e91387246

 

在项目的根目录新建3个文件夹,分别对应开发(dev),测试(test),生产(prod)
文件命名: .env.dev , .env.test , .env.prod

.env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'

.env.test

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'

.env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'

自定义环境变量 和 axios 封装 全局变量的定义和引用

最后总结:

npm run dev //本地运行

npm run build:test //测试环境打包

npm run build:pro //正式环境打包

 

 

 

 

 

解释2:

自定义环境变量 和 axios 封装 全局变量的定义和引用

在接口管理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" , 并指定编译模式

 

"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"
    },

 

 

 

自定义环境变量 和 axios 封装 全局变量的定义和引用

 

main.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()
    })
  } 

 

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)
    })
  })
}

 

 

 

 

 

 

 

全局变量的定义和引用

创建一个全局变量模块文件 gloab.js

//创建变量

var blo = true

//暴露出去
export default {
  blo
}

方式一:在某个vue页面引入  ,这样就可以在这个页面通过global.blo来访问这个变量了

import global from '../../../utils/global'

方式二:全局引入

在main.js文件中引入,并挂在到vue原型对象上
  import global_ from './components/Global'//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

 

 

 

 

相关标签: 前端