小程序選定了mpvue做爲開發框架,搭建開發環境和構建環境。自從用了Travis和Jenkins以後,再也回不到手工構建的時代了。javascript
web項目中,自從先後臺分離的結構造成,就造成了一個要求,先後臺的鏈接URL須要根據部署環境進行切換,線上的URL和測試的URL確定不一樣;這點相似於java應用鏈接數據庫的鏈接切換。
後臺URL的定義要可以多環境構建是自動構建的目標。vue
mpvue的框架基於vue.js構建,利用webpack的擴展工具將vue源碼轉換爲小程序的源碼。vue的源碼是基於node構建的,理論將node構建生態的env模式也能帶入mpvue構建過程。
process.env是nodejs提供的官方api。官方定義是:process.env屬性返回一個包含用戶環境信息的對象。java
process.env.NODE_ENV是默認的全局定義的全局變量.process.env是一個定義對象,能夠自定義擴展。
好比:node
``` javascript process.env = { NODE_ENV : 'dev', api : 'http://example.com' } ``` 這樣子就實現了自定義的過程,將定義分別放到env.dev.js,env.prod.js,env.test.js便可實現多環境實踐。
mpvue的quickStart提供的構建腳手架,env的定義在config目錄中,經過prod.env.js和dev.env.js實現對env的定義。webpack
``` js prod.env.js module.exports = { NODE_ENV: '"production"', api: '"example.com"' } ```
如何使用呢?
由於process是一個node的全局變量,使用Process對象在vue源碼中應該是任意使用的。測試下:web
// 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>
啓動構建工具,打開微信開發工具,能夠正確輸出定義結果,目標達成。數據庫