使用webpack+vue-cli搭建项目如何区分开发、测试、展示和生产环境？

今天分享下自己使用 webpack + vue-cli 搭建项目的时候，是如何区分开发、测试、展示、生产这四种环境的。

我们随便百度怎么区分环境，会有很多种答案。但大多数都是让在 config 文件夹下新建一个 test.env.js 和 pre.env.js，然后再去修改一大堆的配置，显得非常的麻烦。今天给大家分享自己一直在用的一种区分环境的方法。

本方法是无意间看到的一位博主的讲解，自己感觉很方便，如不喜欢请参考别人的方法。

1. 主要环境区分

我是把开发环境和其他三种环境区分开了，开发环境就是用来开发，然后其他三种根据需求不同用不同的环境打包。

我这么做主要是为了区分请求的 BASE_URL 来分别对应后台的不同库。所以 config 里面的文件还是原来样子。

好了，下面直接贴代码。

2. dev.env.js 代码如下

1. 'use strict’
2. module.exports = {
3. NODE_ENV: ‘“development”’,
4. EVN_CONFIG: ‘dev’,
5. BASE_URL: ‘“你的服务器地址”’
6. }

3. prod.env.js 代码如下

1. 'use strict’
2. var obj = {}
3. const target = process.env.npm_lifecycle_event;
4. if (target == ‘test’) {
5. obj = {
6. NODE_ENV: ‘“testing”’,
7. EVN_CONFIG: ‘test’,
8. BASE_URL: ‘“你的服务器地址”’,
9. }
10. } else if (target == “pre”) {
11. obj = {
12. NODE_ENV: ‘“presentation”’,
13. EVN_CONFIG: ‘pre’,
14. BASE_URL: ‘“你的服务器地址”’
15. }
16. } else {
17. obj = {
18. NODE_ENV: ‘“production”’,
19. EVN_CONFIG: ‘prod’,
20. BASE_URL: ‘“你的服务器地址”’
21. }
22. }
23. module.exports = obj;

4. package.json  scripts 代码如下

1. “scripts”: {
2. “dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,
3. “test”: “node build/build.js”,
4. “pre”: “node build/build.js”,
5. “build”: “node build/build.js”
6. },

5. 使用方式

1. 开发环境：npm run dev
2. 测试环境：npm run test
3. 展示环境：npm run pre
4. 生产环境：npm run build

如有疑问欢迎留言提出