三分鐘整合vue+node多環境框架
阿新 • • 發佈:2018-12-29
三分鐘整合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多環境框架已搭建完成