三分钟集成vue+node多环境框架

三分钟集成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多环境框架已搭建完成