精华内容
下载资源
问答
  • vue生产环境和开发环境配置不同的api地址 用vue-cli构建的项目中,有两个文件是用来区分生产环境和开发环境的。 /config/dev.env.js /config/prod.env.js 在main.js中可以得到当前的开发环境: var env = process...

    vue生产环境和开发环境配置不同的api地址

    用vue-cli2构建的项目中,有两个文件是用来区分生产环境和开发环境的。

       /config/dev.env.js
        /config/prod.env.js
    

    在main.js中可以得到当前的开发环境:

    var env = process.env.NODE_ENV;
    

    所以根据不同的环境配置不同的api,

    其中我有两个存放不同api地址的json文件。因为我用的api地址有多个,所以放在json文件里统一管理。
    在main.js文件中引入两个JSON文件。

    import apiConfigProd from '../static/apiConfigProd.json'
    import apiConfigDev from '../static/apiConfigDev.json'
    

    我的apiConfigDev.json

    {
    "api": "apiDevUrl",
    "api2": "apiDev2Url",
    "websocketUrl":: "ws://......"
    }
    

    我的apiConfigProd.json:

    {
    "api": "apiProdUrl",
    "api2": "apiProd2Url",
    "websocketUrl":: "wss://......"
    }
    

    其中apiConfigProd是生产环境的api地址,apiConfigDev是开发环境的api地址。并且两个josn文件中的key命名一样,方便在代码中使用。

    然后,在main.js中添加如下代码:
    development是开发环境,production是生产环境。这里我用的是axios, Vue.prototype.apiConfig是vue的全局属性

    var env = process.env.NODE_ENV;
    
    if (env == 'development') {
      axios.defaults.baseURL = apiConfigDev.api
      Vue.prototype.apiConfig = apiConfigDev
    } else if (env == 'production') {
      axios.defaults.baseURL = apiConfigProd.api
      Vue.prototype.apiConfig = apiConfigProd
    }
    

    然后在组件中使用,可直接打出log,查看当前的api地址:

    console.log(this.apiConfig)
    

    使用哪个地址就直接点哪个,this.apiConfig.api2

    this.axios.get(this.apiConfig.api2, {
        params: {
          id: 12345
        }
      })
      .then(()=>{})
    

    vue打包的时候,peocess.env.NODE_ENV默认是‘production’。会自动加载生产环境的api地址。

    展开全文
  • vue中生产环境和开发环境判断

    万次阅读 2018-06-06 17:42:58
    const urlDev = '...
    const urlDev = 'http://dev.womaoapp.com'
    const urlQa = 'http://qa.oss.womaoapp.com'
    var url = ''
    process. env. NODE_ENV === 'development' ? url = urlDev : url = urlQa
    const excelUrl = url + '/fwas.message.admin/sys/fileDown/excel?channelType=1' // 我茂消息发送--获取excel示例
    export { excelUrl }
    展开全文
  • 开发环境下设置接口 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: "/api/" }) ...

    第一步: 设置不同的接口地址

    找到文件config/dev.env.js
    对开发环境下设置接口

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: "/api/"
    })
    
    

    找到文件/config/prod.env.js
    给生产环境下设置接口地址

    'use strict'
    module.exports = {
        NODE_ENV: '"production"',
        API_HOST: '"http://musicapi.leanapp.cn/"'
    }
    

    第二步:调用axios文件下修改baseURL

    axios.defaults.baseURL=process.env.API_ROOT
    

    配置baseURL的三种方法:

    1. 常规设置:
      在只需要配置单个或者有明确接口的时候直接设置,在生产环境和开发环境下需要手动修改
       axios.defaults.baseURL="http://192.168.1.1:5000";
    
    
    1. 动态获取请求地址
      在线上获取地址不明确或者不想手动更改地址的时候可以设置自动获取当前的域名来进行请求,不好的地方在于跨域的话端口是写死的
       let protocol = window.location.protocol; //协议
       let host = window.location.host; //主机
       let reg = /^localhost+/;
       if(reg.test(host)) {
          //若本地项目调试使用
           axios.defaults.baseURL = 'http://192.168.1.1:5000';
       } else {
           //动态请求地址             协议               主机
           axios.defaults.baseURL = protocol + "//" + host  +":5000";
       }
    
    
    1. 采用配置文件
      应用于多个不明确的部署环境,可在不重新打包的情况下更改接口地址,如下设置后只需在dist里面static下找到 config.js更改值就可以实现更换接口地址
       window.gurl={
       AXIOS_TIMEOUT:10000,
       SERVICE_CONTEXT_PATH:'http://192.168.1.1:5000' 
     }
    
    

    在index.html里面引入config.js

       <script src="./static/config.js" type="text/javascript"></script>
    
    

    main.js

    	axios.defaults.baseURL = window.gurl.SERVICE_CONTEXT_PATH;
    
    

    第三步:重启项目

    npm run dev的时候开发环境下和生产环境下调用的不一样的接口

    展开全文
  • https://cli.vuejs.org/zh/guide/mode-and-env.html#%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%BE%A7%E4%BB%A3%E7%A0%81%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F ...第二步 :开发环境...
    展开全文
  • iOS的生产环境和开发环境

    千次阅读 2016-09-20 13:42:04
    字数213 阅读1830 评论4 喜欢4 这两天研究推送功能,有一个问题一直困扰着我,就是Device token会变化 当我用XCode直接运行到...其实这是生产环境和开发环境的问题,在这两个环境下Device token是不同的 如果
  • 1、在dev.env.js文件中添加配置(开发环境): 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"',...
  • .env.development # 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_xxxxxx # 目标服务接口地址,这个地址是按照你自已环境来的, 添加 或者更改配置...# 开发环境的前缀 ...
  • 1 两个环境下的资源图 2 spring.**的xml文件设置 3 web.xml 添加spring profile的值 ok了,启动项目即可 (VM arguments中添加 -Dspring.profiles.active=dev)
  • node 启动区分开发环境和生产环境

    千次阅读 2019-09-02 11:27:13
    有时候我们启动node 项目需要区分开发环境和生产环境 例如 开发接口地址和生产环境的接口地址不一致 ​如何配置环境变量 直接在cmd环境配置即可,查看环境变量,添加环境变量,删除环境变量等操作1.windows环境配置...
  • Nuxt.js中配置生产环境和开发环境API

    千次阅读 2020-03-22 17:38:34
    首先在 nuxt.config.js 中配置 env 如下代码: export default { ... env: { baseUrl: process.env.BASE_URL || '... } } 然后在 plugins 目录下创建 axios.js 文件,并写下如下代码 ...import axio...
  • webpack生产环境和开发环境的配置

    千次阅读 2018-08-05 21:31:14
    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致...在配置前,还是先了解下生产环境和开发环境有哪些区别,知道这些后,才知道我们到底要做些什么 开发环境(development)和生产...
  • module.exports = merge(prodEnv, { ...process.env.API_ROOT 最后重启项目: 这样在开发环境执行npm run dev 的时候,就调用的是 192.168.100.121/api而在执行npm run build打包的时候则调用的是www.baidu.com/api  
  • 1、在resourse目录下新建开发环境配置文件:application-dev.yml 键入代码: server: port: 8080 2、在resourse目录下新建生产环境配置文件:application-pro.yml 键入代码: server: port: 8081 3、在...
  • 通过不同命令行切换不同环境api等信息 例如: npm run serve调用本地环境api npm run test 调用测试环境api npm run build 调用线上环境api 1、先在package.json文件中添加: "test": "vue-cli-service build --mode...
  • 开发环境和生产环境的区别

    千次阅读 2020-07-09 17:48:46
    开发环境(development) 开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。(程序员接到需求后,开始写代码,开发,运行程序,看看程序有没有达到预期的功能;...
  • 项目根目录创建env.d.ts文件 添加以下内容 interface ImportMetaEnv { VITE_APP_TITLE: string // 更多环境变量... } 3. 4.axios配置
  • Vue2切换生产环境、测试环境和开发环境

    千次阅读 热门讨论 2019-04-28 19:47:59
      Vue配置环境变量模式,可以分为两种模式:   第一种:Vue项目搭建成功后,configbuild文件夹都存在 ​​​​   知道有这两个文件夹后,接下来就该配置环境变量以及对应的模式了。   首先,看一下...
  • 开发环境开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告。 测试环境:一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布...
  • Webpack配置区分开发环境和生产环境

    千次阅读 2019-09-27 15:54:01
    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;生产环境通常指的是...
  • 1、上图的三个文件需要自己加在所创建的vuecli...VUE_APP_MODE = 'development' //通过"VUE_APP_MODE"变量来区分环境 outputDir = 'development' VUE_APP_URL = "http://ip:端口号/QHSE/" 3、在package.json进行...
  • vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址 我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同的API...
  • 1. 在开发过程中 有时候会有历史数据产生,我建议不要用生产环境的数据库,然后本地复制数据库信息,利用本地的开发环境进行数据的生产。2. 所以我们在处理数据的时候要区分生产就是生产,开发就是开发,不要把开发...
  • NodeJS 中判断开发环境和生产环境

    千次阅读 2020-03-19 13:25:48
    NodeJS 中判断开发环境和生产环境 直接使用第三方模块cross-env 文档说明 安装npm i cross-env 使用 在package.json中可以设置变量 这个时候NODE_ENV === 'production'使用NODE_ENV就可以进行判断{ "name": "node_...
  • vue配置开发环境和生产环境

    千次阅读 2019-09-21 08:33:03
    1、config 文件下新建 proxyConfig.js 文件 2、拷贝以下代码至该文件中 module.exports = { proxy: { '/api': { target:'http://192.168.5.188:8080', // 接口域名 change...
  • 生产环境和开发环境的区别 --save 的缩写是 -S 存在生产环境 dependencies中,项目部署上线需要的依赖项. --save-dev的缩写是 -D 存在开发环境 devDependencies中,项目部署上线不需要此节点下的依赖项. --production...
  • vue项目打包之开发环境和部署环境

    千次阅读 2020-04-22 20:59:05
    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成...
  • 你有没有遇到过这样的情况!比如你们有四种(或更多)...只区分开发环境和生产环境 使用默认的环境变量 process.env.NODE_ENV 运行npm run start console.log(process.env); // > {NODE_ENV: "development"} //.
  • vue-cli 4.0中区别开发环境和生产环境

    千次阅读 2020-07-01 18:22:09
    场景,官网表单提交功能中,由于测试环境和生产环境的ip不同,需要的clientid不同,测试在每次部署测试环境的时候都需要我手动修改ip,很是麻烦,所以区分下不同的环境打包。 1.新建三个不同的文件来区分不同的环境,...
  • 开发环境配置:/config/dev.env.js文件中修改 var merge=require('webpack-merge') var prodEnv=require('./prod.env') module.exports=merge(prodEnv,{ NODE_ENV:'"development"', API_ROOT:'"//...
  • 开发环境生产环境和测试环境的字面概念做简单称述,并且指出基本区别。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 445,788
精华内容 178,315
关键字:

生产环境和开发环境