三分鐘整合vue+node多環境框架

      vue是國人開發的一款js框架，較Angular更為系統，較React更為簡潔，加之webpack的打包、監控、開發環境熱更新等能力，vue的流行不難解釋。

安裝node

      vue的執行依賴node環境，如果讀者未安裝請務必先安裝node，非常簡單，只須解壓-新增環境變數，筆者就不再贅述

      地址：https://nodejs.org/zh-cn/download/

搭建vue腳手架

      筆者的操作環境是Windows

• 安裝全域性vue

C:\Users\Administrator\Desktop>npm install -g vue

• 檢視版本

C:\Users\Administrator\Desktop>vue -V

• 安裝全域性vue客戶端

C:\Users\Administrator\Desktop>npm install -g vue-cli

• 建立一個基於webpack模版的專案，按照提示逐步安裝（想快的話狂按Enter就好）

C:\Users\Administrator\Desktop>vue init webpack vueDemo

• 腳手架已搭建完畢

整合node（一種最簡單的整合方式）

• 在build目錄下建立nodeserver.js

var http = require('http');					// 引用http元件
var fs = require('fs');						// 引用檔案系統元件
var url = require('url');					// 引用url元件
var events = require('events');				// 引用events元件
const chalk = require('chalk')				// 引用color元件
var config = require("../config")
const ora = require('ora')					// 引用node載入樣式元件
const rm = require('rimraf')				// 引用刪除檔案元件

ora('starting node server...').start()

http.createServer( function (request, response) {							// get
   var parsedUrl = url.parse(request.url).pathname
   var pathname = config.build.assetsRoot + (parsedUrl != "/" ? parsedUrl : "/index.html" );							// url {watchDir}/html/product.html

   fs.readFile(pathname, function (err, data) {					// 通過url尋找檔案
      if (err) {
         response.writeHead(404, {'Content-Type': 'text/html'});
      }else{             
		  if(!!pathname.match('.css')) {
	         response.writeHead(200, {'Content-Type': 'text/css'});    
		  } else if (!!pathname.match('.html')) {
	         response.writeHead(200, {'Content-Type': 'text/html'});    
		  } else if (!!pathname.match('.js')) {
	         response.writeHead(200, {'Content-Type': 'application/x-javascript'});    
		  } else {
	         response.writeHead(200, {'Content-Type': 'text/html'});    
		  }
         response.write(data.toString());									// 輸出檔案
      }
      response.end();														// 傳送響應資料
   });   
}).listen(8081);

console.log(chalk.cyan('  Node server started. Ask: http://127.0.0.1:8081 .\n'));

ora('waiting request...').start()
 

• 整合node已完成

      回到vueDemo目錄下，執行以下命令以啟動node服務

C:\Users\Administrator\Desktop\vueDemo>npm run dev && node build/nodeserver.js

      接下來可以訪問服務了：http://127.0.0.1:8081

配置多環境

      假設我們有4個環境（本地開發環境、聯調環境、測試環境、線上環境）

• build目錄下建立build-dev.js

'use strict'
process.env.type = '"development"'
require('./build')

• build目錄下建立build-staging.js

'use strict'
process.env.type = '"staging"'
require('./build')

• 修改config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  type: process.env.type
}

• 修改package.json中的scripts物件

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "nodeserver-dev": "node build/build-dev.js && node build/nodeserver.js",
    "nodeserver-staging": "node build/build-staging.js && node build/nodeserver.js",
    "nodeserver-prod": "node build/build.js && node build/nodeserver.js"
  }

• src目錄下建立config/profile.js

const IpConfig = {
  develop: {
    url1: 'http://host1:port/domin/',
    url2: 'http://host2:port/domin/'
  },
  staging: {
    url1: 'http://host1:port/domin/',
    url2: 'http://host2:port/domin/'
  },
  production: {
    url1: 'http://host1:port/domin/',
    url2: 'http://host2:port/domin/'
  }
}

// 本地環境
if (process.env.NODE_ENV === 'development') {
  module.exports.config = IpConfig.develop
} else {
  // 測試環境
  if (process.env.type === 'staging') {
    module.exports.config = IpConfig.staging
  // 聯調環境
  } else if (process.env.type === 'development') {
    module.exports.config = IpConfig.develop
  // 正式環境
  } else {
    module.exports.config = IpConfig.production
  }
}

• src目錄下的main.js中新增

import profile from './profile'
Object.defineProperty(Vue.prototype, '$profile',{value:profile.config})

• 多環境配置已完成

vue使用說明（以下命令都要在專案根目錄下執行）

• 根據package.json安裝本地依賴

C:\Users\Administrator\Desktop\vueDemo>npm install

• 本地環境執行，預設開啟webpack熱更新能力

C:\Users\Administrator\Desktop\vueDemo>npm run dev

• 打包(預設配置打包在dist檔案中)

C:\Users\Administrator\Desktop\vueDemo>npm run build

• 聯調環境執行（啟動成功後訪問：http://127.0.0.1:8081）

C:\Users\Administrator\Desktop\vueDemo>npm run nodeserver-dev

• 測試環境執行（啟動成功後訪問：http://127.0.0.1:8081）

C:\Users\Administrator\Desktop\vueDemo>npm run nodeserver-staging

• 正式環境執行（啟動成功後訪問：http://127.0.0.1:8081）

C:\Users\Administrator\Desktop\vueDemo>npm run nodeserver-prod

• 至此，vue+node多環境框架已搭建完成