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~~~