小程序選定了mpvue作為開發框架，搭建開發環境和構建環境。自從用了Travis和Jenkins之后，再也回不到手工構建的時代了。
目的－自動構建
web項目中，自從前后台分離的結構形成，就形成了一個要求，前后台的連接URL需要根據部署環境進行切換，線上的URL和測試的URL肯定不同；這點類似於java應用連接數據庫的連接切換。
后台URL的定義要能夠多環境構建是自動構建的目標。
構建簡介
mpvue的框架基於vue.js構建，利用webpack的擴展工具將vue源碼轉換為小程序的源碼。vue的源碼是基於node構建的，理論將node構建生態的env模式也能帶入mpvue構建過程。
process.env是nodejs提供的官方api。官方定義是：process.env屬性返回一個包含用戶環境信息的對象。
process.env
process.env.NODE_ENV是默認的全局定義的全局變量.process.env是一個定義對象，可以自定義擴展。
比如：
``` javascript
process.env = {
NODE_ENV : 'dev',
api : 'http://example.com'
}
```
這樣子就實現了自定義的過程，將定義分別放到env.dev.js,env.prod.js,env.test.js即可實現多環境實踐。
mpvue中使用
mpvue的quickStart提供的構建腳手架，env的定義在config目錄中，通過prod.env.js和dev.env.js實現對env的定義。
``` js prod.env.js
module.exports = {
NODE_ENV: '"production"',
api: '"example.com"'
}
```
如何使用呢？
因為process是一個node的全局變量，使用Process對象在vue源碼中應該是任意使用的。測試下：
// App.vue
<script>
export default {
created () {
// 調用API從本地緩存中獲取數據
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
console.log('app created and cache logs by setStorageSync')
}
}
</script>
//pages/index/index.vue
<script>
export default {
methods: {
clickHandle (msg, ev) {
console.log(process.env)
console.log('clickHandle:', msg, ev)
}
}
}
</script>
啟動構建工具，打開微信開發工具，可以正確輸出定義結果，目標達成。