zoukankan      html  css  js  c++  java
  • 环境切换

    第一步先要了解都是有什么环境!!!

    一共呢是有着5种环境:::

    本地环境

    测试环境

    灰度环境

    预发布环境

    成产环境

    有着两种方案去解决环境接口地址切换

    第一种:通过cross-evn配合webpack来进行配置,还需要node
    可以去参考https://www.npmjs.com/package/cross-env
    1.先进行下载使用命令npm install --save-dev cross-env
    2.在package.json中的script标签里面配置环境变量
    读取环境变量: process.env.环境变量的名称
    代码::::

    "scripts": {
    "serve": " cross-env BUILD_ENV=dev vue-cli-service serve",
    "build": " cross-env BUILD_ENV=prod vue-cli-service build",
    },
    在vue.config.js中配置添加自定义的环境变量

    代码::::

    module.exports = {
    // lintOnSave: false,
    chainWebpack: config => {
    config
    .plugin('define')
    .tap(args => {
    console.log(args) // [ { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ]
    // 由于环境变量里面没有我们在package.json中添加的环境变量BUILD_ENV所以我们进行了添加:
    console.log('process:', process.env.BUILD_ENV)
    args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
    return args
    })
    }
    }
    接着再src文件中见一个build文件然后在里面建一个dev.js和prod.js(注意这两个文件名要和package.json中配置的环境变量要一致)
    在两个文件中配置url例如:

    module.exports = { BASE_URL: 'http://test.365msmk.com' }

    接着在封装的axios中写上这样可以自动切换

    console.log('process:', process.env.BUILD_ENV) //prod||dev
    const confi = require(`../build/${process.env.BUILD_ENV}.js`)
    const service = axios.create({
    baseURL: confi.BASE_URL,
    timeout: 2500
    })

  • 相关阅读:
    就是要让你彻底学会 @Bean 注解
    Redis持久化深入理解
    设计模式内容聚合
    多线程高并发内容聚合
    实战分析:事务的隔离级别和传播属性
    28个Java开发常用规范技巧总结
    面试官:你了解过Redis对象底层实现吗
    几个高逼格 Linux 命令!
    Spring核心(IoC) 入门解读
    Python Beautiful Soup模块的安装
  • 原文地址:https://www.cnblogs.com/mzj143/p/12927365.html
Copyright © 2011-2022 走看看