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" alt="" 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了