Vue项目分环境(开发/测试/生产环境)打包

        原先是自己学习怎么配置分环境打包，最后还是觉得记录一下，顺便回顾一下，如果能帮助到其他童鞋更好。

        本文建立在Vue环境安装配置好，通过Vue init 创建好一个项目的前提下。希望能有帮助，有错误麻烦指出。（勿喷，学习中，谢谢！）

一、安装cross-env

        1、什么是cross-env?

                通过js在项目工程设置不同环境变量的工具。

        2、安装

npm install cross-env

二、设置不同环境变量

        1、package.json文件中定义运行开发、测试、生产环境的变量。

"build:dev": "cross-env NODE_ENV=dev env_config=dev node build/build.js",
"build:test": "cross-env NODE_ENV=test env_config=dev node build/build.js",
"build:prod": "cross-env NODE_ENV=prod env_config=prod node build/build.js"

         传入不同值的参数NODE_ENV。

        2、打开build目录下的build.js文件。

        修改原先的代码：

修改后的代码为：

 根据运行不同的打包命令，动态获取当前打包传入的参数NODE_ENV，判断打包的环境。

此时运行

npm run build:dev

 就可以看到：

        3、配置config

        首先打开build目录下的webpack.prod.conf.js文件。

        上面红色圈出的代码，通过判断NODE_ENV参数的值，从而确定是从config目录下的test.env、prod.env、dev.env文件中取参数。这里判断的值是写死的testing，修改成判断传入的值。

        这里在config目录下的index.js文件build板块中定义好如下变量，通过config.build来判断取哪个.env文件中配置的参数。

例如dev.env.js中内容为：

此时运行一下npm run build:dev，可以看到打印出的env的值为：

三、切换环境运行

        上面说了分环境打包，下面说一下开发工具直接运行项目怎么切换环境运行。

         npm run dev运行项目，首先看package.json中的dev对应的值，还像上面一样，通过cross-env设置不同环境变量。

         设置好的变量如下：

        这里统一通过webpack.dev.conf.js来切换。看看webpack.dev.conf.js代码，通过如下代码获取对应的.env配置的值，我们在这里获取传入的NODE_ENV变量的值，来切换对应的环境配置。

         修改好的代码如下：

         然后去config文件夹下面的index.js文件定义一个常量获取对应的环境配置的值，如下：

        

        这里我用一个比较偷懒的方法展示一下。在main.js引用config的index.js，然后打印一下baseUrl，代码如下。这样运行项目在浏览器打开页面就可以看到控制台打印出当前环境的地址。

       以上就是要分享的全部内容，自己做个记录，顺便希望能对大家有点用，多提意见，谢谢！！