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

  • 相关阅读:
    316 Remove Duplicate Letters 去除重复字母
    315 Count of Smaller Numbers After Self 计算右侧小于当前元素的个数
    313 Super Ugly Number 超级丑数
    312 Burst Balloons 戳气球
    309 Best Time to Buy and Sell Stock with Cooldown 买股票的最佳时间含冷冻期
    Java 类成员的初始化顺序
    JavaScript 全局
    HTML字符实体
    Java中的toString()方法
    JavaScript 弹窗
  • 原文地址:https://www.cnblogs.com/mzj143/p/12927365.html
Copyright © 2011-2022 走看看