vue实践笔记系列八——动态修改打包后的服务器地址_江南春008_新浪博客

为何会写这篇文章呢？因为打包部署太麻烦

 

大家都知道，vue-cli项目配置后台服务地址的位置在config目录下的文件中配置，初学时觉得很方便。

真正应用到项目之后，会发现我们不只有开发环境，还有测试环境、生成环境等等，如果打包部署的话，我们需要分别为每个环境打一次包，很繁琐！

项目前期还可以接受这种方式，因为主要是本地开发，到了项目后期进行bug修复和优化阶段，打包部署变得比较频繁，这种方式属于浪费时间的重复体力操作，如果我们够动态修改打包后的服务地址，那就可以只打一个包，交给运维人员去修改后部署就可以了，大大提升了效率，运维人员也不用在每次都提醒开发打哪个环境的包了。

 

如何实现呢？很简单，接下来详细讲解下（以网站群vue项目讲解，其他项目大同小异）。

1、分析服务器地址究竟在哪里用了

在接口调用的时候拼接路径了。

既然是在接口调用时拼接路径，那我们为何不将路径封装到交互方法中，解决这个问题的代码如下：

2、找到问题根据之后，我们来解决具体的问题，配置的路径怎么获取呢

2.1在static目录下新建一个config.json文件，内容是{"BASE_URL": "http://localhost:8080/cms"}。

为什么放在static目录下而不是放到其他地方？因为static目录下的文件不会被打包混淆，打包之后可以很方便的修改

2.2读取cofnig.json中的内容，存到Vue.prototype中，供全局访问

2.3不同类型文件中的调用方式

在.vue文件中，直接使用this.BASE_URL即可访问

在js文件中，先引入vue，import Vue from 'vue'，然后使用Vue.prototype.BASE_URL调用

3、为防止接口地址请求与页面渲染之间的时间差异化导致接口地址获取不到，可以将new Vue()的初始化放到请求中

完整的代码如下：

为何会写这篇文章呢？因为打包部署太麻烦

 

大家都知道，vue-cli项目配置后台服务地址的位置在config目录下的文件中配置，初学时觉得很方便。

真正应用到项目之后，会发现我们不只有开发环境，还有测试环境、生成环境等等，如果打包部署的话，我们需要分别为每个环境打一次包，很繁琐！

项目前期还可以接受这种方式，因为主要是本地开发，到了项目后期进行bug修复和优化阶段，打包部署变得比较频繁，这种方式属于浪费时间的重复体力操作，如果我们够动态修改打包后的服务地址，那就可以只打一个包，交给运维人员去修改后部署就可以了，大大提升了效率，运维人员也不用在每次都提醒开发打哪个环境的包了。

 

如何实现呢？很简单，接下来详细讲解下（以网站群vue项目讲解，其他项目大同小异）。

1、分析服务器地址究竟在哪里用了

在接口调用的时候拼接路径了。

既然是在接口调用时拼接路径，那我们为何不将路径封装到交互方法中，解决这个问题的代码如下：

2、找到问题根据之后，我们来解决具体的问题，配置的路径怎么获取呢

2.1在static目录下新建一个config.json文件，内容是{"BASE_URL": "http://localhost:8080/cms"}。

为什么放在static目录下而不是放到其他地方？因为static目录下的文件不会被打包混淆，打包之后可以很方便的修改

2.2读取cofnig.json中的内容，存到Vue.prototype中，供全局访问

2.3不同类型文件中的调用方式

在.vue文件中，直接使用this.BASE_URL即可访问

在js文件中，先引入vue，import Vue from 'vue'，然后使用Vue.prototype.BASE_URL调用

3、为防止接口地址请求与页面渲染之间的时间差异化导致接口地址获取不到，可以将new Vue()的初始化放到请求中

完整的代码如下：

配置完成后，打包就可以修改打包后的static/config.json中的地址了！