在上级我们搭建完成了vue的多页面入口，但是在实际开发中，还是有很多现实需求，例如开发环境和生产环境的区分。
实际上Vue-cil已经帮我们初步设置好了两种环境，我们只需要在其基础上稍作修改
需求： 生产环境全部静态资源全部使用固定的cdn。
首先找到项目下的
/config/dev.env.js
/config/prod.env.js这两个文件就是针对生产环境和发布环境设置不同参数的文件
我们在dev.env.js中加上开发环境的路径
- 值一定要加上双引号，否则会被webpack视为变量而报错
module.exports = merge(prodEnv, {
NODE_ENV: ‘"development"‘,
UPLOAD_ENV: ‘"http://localhost:3000/"‘,
})在prod.env.js中
module.exports = {
NODE_ENV: ‘"production"‘,
UPLOAD_ENV: ‘"https://cdn-data/"‘, //模拟cdn地址
}
在正常的开发中，肯定会有很多的ajax请求，为了便于管理，封装一下所有的api和
ajax请求，准备下mock数据
vue的脚手架为我们搭好了一个静态服务器，我们可以直接在项目下增加一个文件夹data存放mock数据
还记得dev环境下的地址吗
module.exports = merge(prodEnv, { NODE_ENV: ‘"development"‘, UPLOAD_ENV: ‘"http://localhost:3000/"‘, // 静态服务器地址 })
在项目下新建一个data问价夹，添加一个json文件
//data/weather.json
{
"module"：" mock数据"
"code": "200"
} // weather.js
const weather = {
// 这里有两个环境，对应的不同的api。开发的时候，可以使用json和静态服务器来模拟ajax
//这里的getWeatherData即是在页面上使用时传入的apiKey
// {pathData}是路径参数，最后会拼在请求的URL中
getWeatherData: {
development: {
url: ‘/data/weather.json?{pathData}‘,
type: ‘json‘,
method: ‘get‘,
contentType: ‘application/json‘
},
production: {
url: ‘https://free-until.heweather.com/v5/now?city={pathData}‘,
method: ‘get‘,
contentType: ‘application/json‘
}
}
}
export default weather
```
然后可以将不同的api配置文件整合一下
```
// apimap.js
import weather from ‘./api/weather‘
let api ={
...weather
}
export default api
```
在封装一下ajax
```
// ajax.js
let ajax = function (options) {
// 通过传入参数中的key和开发环境来找到对应api路径
let api = Object.assign({}, apiMap[options.apiKey][process.env.NODE_ENV])
// 路径参数
let extend = {}
if (options.pathData) {
extend.url = api.url.replace(/{\w+}/g, (key) => {
return options.pathData[key.substring(1, key.length - 1)]
})
}
axios(Object.assign(api, options, extend))
.then(function(respone){
// 成功之后将data数据传回请求的页面
options.success(respone)
})
.catch(function(error){
console.log(error);
});
}
}
```
将我们写的ajax方法挂载到vue实例上
```
// main.js
import ajax from ‘../../until/ajax‘
Vue.config.productionTip = false
// 将ajax方法挂载到vue的原型上，以后再页面中可以使用this.ajax调用
Vue.prototype.ajax = ajax
new Vue({
el: ‘#app‘,
template: ‘<App/>‘,
components: { App }
})
```
```
```
这样，封装了ajax和api， 在本地dev环境下， 将会访问http://localhost:3000/data/weather.json
然后我们在页面上写一个请求
```
// app.vue
export default {
name: ‘app‘,
components: {},
data () {
return {
info: [],
imgPath: ‘地址‘
}
},
created () {
this.ajax({
apiKey: ‘getWeatherData‘,
data: ‘admin‘,
pathData: {key: ‘sss‘},
success: data => {
this.info = data
}
})
}
}
```
刷新页面，我们就能看到请求到的mock数据啦。
在开发中，也会遇到cdn封装的问题，在写静态页面时，将图片文件放在本地，之后上传到cdn后，图片路径会发生变化。所以我们也可以封装一下。
在刚才的data文件夹下添加一个img文件夹，放上对应的img文件
在页面上
```
<img :src="cdn + ‘/data/img/001.png" style="width: 50px; height: 50px;">
// script
data () {
return {
info: [],
cdn: process.env.UPLOAD_ENV,
imgPath: ‘地址‘
}这样，本地服务器警徽访问 http://localhost:3000/data/img/001.png
生产环境将会访问 https://cdn-data/data/img/001.png
只要注意好路径，就可以切换cdn了
