利用process.env.NODE_ENV设置不同环境的url

Question

因为有本地开发环境，测试环境，生产环境

就像利用env去判断来有不同的url
本地的npm run dev的时候默认env就是dev
所以可以直接实现

但是打包的时候我看了一下build.js的代码
有一行是

process.env.NODE_ENV = 'production'

之后尝试打包之后发现线上打印process.env.NODE_ENV确实是preduction
之后便想着再新建一个打包文件
就复制build.js加了一个pre.js
然后把这一行代码的production改为了pre

并在package.json里
仿照

"build": "node build/build.js",
"pre": "node build/pre.js",

写了pre的打包

然后在自己的判断文件里判断
process.env.NODE_ENV 为dev就是本地环境的url 是pre就是测试环境的 是preduction就是生产环境的

结果发现用 npm run build 和 npm run pre
打包出来的ENV都是preduction。。。

不知道怎么搞了。

Answer 1

昨天自己研究了打包流程
发现打包的时候会引入了一个config文件
在config文件里面又一次定义了NODE_ENV导致覆盖了之前我的自定义
只需要再分开一份配置文件即可

但是后来发现了更好的解决方案

首先安装了cross-env

npm install --save-dev cross-env

然后打包的时候就可以

cross-env xxx=xxx node build/build.js

来自定义env了

我自定义了个BUILD_ENV来做环境变量

这样也不需要新建文件 两个可以都使用build.js来处理
十分方便！

比如我的pre和build的打包分别为

"build": "cross-env BUILD_ENV=production node build/build.js",
"pre": "cross-env BUILD_ENV=pre node build/build.js"

然后只需要在自定义的判断文件里写下类似

<script>
  let url = '';
  let httpsCheck = '';

  let env = process.env.BUILD_ENV;

  if (env == 'production') {
    // 生产环境
    url = 'https://abc.net/api/';
    httpsCheck = true;
  } else if (env == 'pre') {
    // 测试环境
    url = 'https://pre.abc.net/api/';
    httpsCheck = true;
  }else {
    // 本地环境
    url = 'http://192.168.2.15:8808/api/';
    httpsCheck = false;
  }

  export default {
    url, httpsCheck
  }
</script>

我是自己封装了一下axios来请求，所以只需要在main.js里引入该js即可！

其他地方需要使用可以在main.js里引入并定义

import config from '../src/config'
Vue.prototype.GLOBAL = config

这样在所有地方都可以取到啦

另外用DefinePlugin也是很方便的！
可以省略上面2个步骤。

Answer 2

你的应该是cli-2脚手架搭建的项目，build中还需要复制一个webpack.pre.conf文件，修改里面的process.env.NODE_ENV

最后还是建议你代码分3个分支比较好开发版本分支 测试版本分支 生产版本，不同的版本请求的URL也不同，这样就不用管它是什么环境的，需要发布什么环境就切换到相应的版本分支直接打包，然后发布就行了。
代码合并过程：开发版本分支 -> 测试版本分支 > 生产版本
开发完成后需要测试了，将开发版本的代码合并到测试版本分支，测试相应功能都完好后，将测试版本分支合并到生产版本
按项目需要可以在弄个预生产版本分支。

Answer 3

你可以自己在全局配置里写个变量，如下：

当你需要什么环境时，只需要修改这里的名称即可。

根据不同环境，使用三元表达式进行判断即可。