Vue打包并自动部署到指定服务器

安装依赖

配置备用环境变量
在根目录下创建envdevelopment文件，并添加环境变量

VUE_APP_SERVER_ID = 0

在根目录下创建envproduction文件，并添加环境变量

VUE_APP_SERVER_ID = 1

创建自动化部署脚本
在packagejson同级目录下创建文件夹deploy

在deploy文件下创建configjs和serversjs和indexjs

serversjs：配置服务器相关信息

configjs：发布前的一些处理

indexjs：发布到服务器的处理逻辑

添加packagejson中的scripts命令

效果如下

webpack本身有dev和prodcution两套环境，我们的项目还有uat环境，只有两套环境并无法满足项目开发的需要，因为我参考webpack搭建dev环境的方式搭建了uat环境。
首先，找到项目的packagejson,找到scripts,加上uat指令的定义，

很容易理解，当我们执行npm run dev时候执行node中build目录的dev-serverjs，所以我们定义了uat指令执行uat-serverjs。
uat-serverjs

webpackuatconfjs

uatenvjs

找到config下方的indexjs
在dev下方增加uat的配置，配置如下：

这样，搭建了dev,uat和production三套环境，我们在devenvjs增加API_ROOT：

在prodenvjs增加API_ROOT:

在配置api接口的文件中，将baseURL设置成：

这里以axios的设置为例，项目根据实际情况调整。
如此，当我们运行

指向的域名服务器是

当我们运行

指向的域名服务器是

这是前面配置的自定义指令，可根据项目实际情况定义自己的指令
当我们运行

指向的域名服务器是

打包项目的时候，打包的是根据服务器获取到相应的接口，我们就不用调来调去，也不容易出错，有问题欢迎留言讨论。

---