MPVUE多環境定義後臺URL
阿新 • • 發佈:2018-11-10
小程式選定了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>
啟動構建工具,開啟微信開發工具,可以正確輸出定義結果,目標達成。