vue多环境配置

在上级我们搭建完成了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了