VUE 识别生产环境 开发环境

恩~~~开发环境和生产环境接口往往不同~

开发环境+生产环境,开发环境就是在 /config/index.js下配置proxyTable 。

这里简单贴一下代码,不多讲。

 proxyTable: {
      '/api': {    //将www.exaple.com印射为/apis
          target: 'https://xxx',  // 接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/api': ''   //需要rewrite的,
          },
          secure: false,
          headers: {
              Referer: 'https://xxx'
          }
      }
    },

主要讲一下生产环境的问题。貌似是因为打包项目后代理就失效啦,所以再生产环境下要重新配置一下。网上的方案有很多种,这里就讲一种我个人觉得还是挺不错滴,生产和开发环境自动识别切换的一种配置方式。

 

(1)再config/dev.env.js下配置开发环境的API_ROOT

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'   //这是新增的代码
})

 

(2)再config/prod.env.js下配置生产环境的API_ROOT

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://xxx/"'   //这是新增的代码
}

(3)在需要调用的地方

export const evidence_url = process.env.API_ROOT + '/' + '';  

//process.env.API_ROOT 根据不同的环境会返回给你不同的API_ROOT

 

(4)重启项目测试没有问题,打包上传吧!嘻嘻~

 

其实个人jue的VUE配置思路还是蛮简单清晰的,因为他内部做了封装,所以我们写的时候简化了很多。

小白菜如果有什么讲的地方不正确,不完善的请大佬多多指教~

biu~~~

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值