zoukankan      html  css  js  c++  java
  • Vue 开发项目过程中在开发环境,测试环境,生产环境设置不同的请求接口域名

    一、平常项目前期我们会使用线下的本地服务请求接口,上线之前测试环境以及生产环境,以下讲解不同环境的接口配置(3.x为例)

    二、步骤

      1、在根目录下创建".env"文件,内容如下。(production生产环境)

    NODE_ENV = 'production'
    VUE_APP_FLAG = 'pro'
    

      2、在根目录下创建".env.test"文件,这是测试环境需要的配置

    NODE_ENV = 'production'
    VUE_APP_FLAG = 'test'
    outputDir = test  
    

      创建截图如下

      

    三、找到根目录下的package.json文件

      在script中添加  "test": "vue-cli-service build --mode test" (这句话的作用是用来打包生成测试环境的代码,也即是说测试环境的打包需要使用npm run test命令来代替npm run build,生产环境则需要使用npm run build)

      

    四、在main.js中判断当前环境需要加载的接口域名(需要引入axios)

      注:此处如果使用else中的开发环境路径,则vue.config.js中配置的代理将不起作用,故可将此处注释使用代理

    import axios from 'axios'
    
    /*第一层if判断生产环境和开发环境*/
    if (process.env.NODE_ENV === 'production') {
      /*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
      if (process.env.VUE_APP_FLAG == 'pro') {
          //production 生产环境
          axios.defaults.baseURL = 'http://api.xinggeyun.com';//路径
      } else {
          //test 测试环境
          axios.defaults.baseURL = 'http://192.168.0.152:8103';//路径
      } 
    } else { 
      //dev 开发环境 
      //axios.defaults.baseURL = 'http://192.168.0.152:8102';//路径
    } 

     五、执行不同的命令生产对应环境的包

      生产环境域名包:npm run build

      测试环境域名包:npm run test

  • 相关阅读:
    JavaScript基础学习(三)—数组
    JavaScript基础学习(二)—JavaScript基本概念
    JavaScript基础学习(一)—JavaScript简介
    HTML基础学习(二)—CSS
    HTML基础学习(一)—HTML
    JDBC基础学习(六)—数据库连接池
    JDBC基础学习(五)—批处理插入数据
    js_页面关闭beforeunload事件
    css3_box-shadow使用记录
    jq_$.extend和$.fn.extend插件开发和方法的封装
  • 原文地址:https://www.cnblogs.com/deng-jie/p/12426585.html
Copyright © 2011-2022 走看看