vue不同环境配置不同打包命令

2019独角兽企业重金招聘Python工程师标准>>>

写这篇日志缘由

在做vue项目开发的时候，会有不同的环境，个人开发环境，公司测试环境，线上发布环境，由于项目是放在svn上用Jenkins自动拉取部署的，每次发布不同环境，要修改不同接口地址，然后提交->打包->部署，就感觉比较麻烦，于是查了各种博客发现都不太理想，就自己捣鼓了一下午，终于搞定了不同环境（接口地址不同）的部署打包问题。

我的文件目录结构如下

安装一个依赖：cross-env 

        这是一个运行跨平台设置和使用环境变量的脚本，当我们使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。cross-env能够提供一个设置环境变量的scripts，让我能够以unix方式设置环境变量，然后在windows上也能兼容运行。

•     安装：cnpm install -S cross-env

•     使用（可直接在package.json里配置使用）

创建一个XXX.env.js

       这个是我用来发布公司测试环境打包时用的一个文件， xxx是文件名字，可以自己定义，我创建的是develop.env.js，里面内容如下：

其中BASE_API是测试环境里的接口地址

 

配置不同接口地址且引入

1.打开config文件夹，找到prod.env.js(生产环境也叫线上环境)和dev.env.js(开发环境，也就是自己本地跑的环境)两个文件并配置接口地址

• 本地开发环境接口地址配置

• 线上环境接口地址配置

2.打开main.js，引入项目接口地址

ps:有的接口单独放在一个文件中(比如api)，我的就简单配置在了main.js里面了，大家可以根据自己的项目来配置

修改打包配置文件webpack.prod.conf.js

由于vue-cli搭建的项目本来就有线上打包配置文件webpack.prod.conf.js，我就在上面进行简单修改来达到目的：

ps:项目搭建时禁用了项目自带的测试单元，所以这里就这样修改，大家可以根据自己的实际修改这一块的变量，或者复制一个打包配置文件

修改打包配置文件webpack.base.conf.js

因为公司测试环境和线上环境基本类似，所以资源引用路径直接按照线上打包的来，多添加一个条件就可以：

    配置完这些就可以了。我们运行npm run build-test来进行公司测试环境打包，npm run build来进行线上环境打包，也可以把这命令告诉后台或者运维让他配置自动部署命令时使用这两个命令了

转载于:https://my.oschina.net/nameAfei/blog/1930020