Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置

Node.js简介

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用来方便快速地搭建易于扩展的网络应用。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效，非常适合运行在分布式设备的数据密集型的实时应用。Node.js的包管理器npm，是全球最大的开源库生态系统。Node.js的典型应用场景包括：

• 实时应用：如在线聊天，实时通知推送等等（例如socket.io）。
• 分布式应用：通过高效的并行I/O使用已有的数据。
• 工具类应用：海量的工具，小到前端压缩部署（例如grunt），大到桌面图形界面应用程序。
• 游戏类应用：游戏领域对实时和并发有很高的要求（例如网易的pomelo框架）。
• 利用稳定接口提升Web渲染能力
• 前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（例如著名的纯Javascript全栈式MEAN架构）。

部署Node.js环境

二进制安装

该部署过程使用的安装包是已编译好的二进制文件,解压之后,在bin文件夹就已存在node和npm,无需重复编译.

下载解压node.js安装包

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz
tar xf node-v6.9.5-linux-x64.tar.xz 
ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

# 查看版本
npm -v
3.10.10
node -v
v6.9.5

# 至此，Node.js环境已安装完毕。软件默认安装在/root/node-v6.9.5-linux-x64/目录下。

# 如果需要将软件安装到其他目录(例如: /opt/node/下),执行下卖弄步骤
mkdir -p /opt/node/
mv /root/node-v6.9.5-linux-x64/* /opt/node/
rm -f /usr/local/bin/node
rm -f /usr/local/bin/npm
ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm

使用NVM安装多版本

NVM（Node Version Manager）是Node.js的版本管理软件，使您可以轻松在Node.js各个版本间进行切换。适用于长期做node开发的人员或有快速更新node版本、快速切换node版本的场景。

完成以下操作,使用NVM安装多个Node.js版本

使用git将远吗克隆到~/.nvm目录下,并检查最新版本

yum install git
git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

# 激活NVM
echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

# 列出Node.js所有版本
nvm list-remote

# 安装多个Node.js版本
nvm install v6.9.5
nvm install v7.4.0


# 运行nvm 1s查看已安装的Node.js版本，当前使用的版本为v7.4.0。返回结果如下所示
nvm ls
->       v6.9.5
         system
unstable -> 6.9 (-> v6.9.5) (default)

部署测试项目

1 . 新建项目文件example.js

cd ~
vim  example.js
const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => { 
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World
');
}); 

server.listen(port, hostname, () => { 
    console.log(`Server running at http://${hostname}:${port}/`);
});
  

2 . 运行项目

node ~/example.js &

# 一般会将写好的nodejs项目进行如下编译
cd admin-web
npm install --registry=https://registry.npm.taobao.org
npm run build:prod

# 查看是否监听项目端口,如果返回3000代表OK
ss -tnl
State       Recv-Q Send-Q Local Address:Port               Peer Address:Port              
LISTEN      0      128     *:80                  *:*                  
LISTEN      0      128     *:22                  *:*                  
LISTEN      0      128     *:3000                *:* 

项目优化策略

/*
		1. 生成项目报告
		2. 第三库启用CDN
		3. Element-UI组件按需加载
		4. 路由懒加载
		5. 首页内容定制
*/

生成打包报告

打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告,生成报告的方式有两种:

1.通过命令行参数的形式生成报告

// 通过 vue-cli的命令选项可以生成打包报告

// --report选项可以生成report.html以分析包内容
vue-cli-service build --report


// 通过可视化的UI面板直接查看报告(推荐)
		在可视化的UI面板,通过控制台和分析面板,可以方便的查看项目中所存在的问题

项目上线相关配置

安装环境需要包

npm i express -S

上线环境配置

创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹,托管为静态资源即可

1.将打包好的dist目录复制到你要部署的目录,项目同级目录创建app.js文件

const express = require('express')

// 创建web服务器
const app = express()


// 托管静态资源
app.use(express.static('./dist'))

// 启动web服务器
app.listen(8080,() =>{
	console.log('web server running at http://127.0.0.1')
})

node app.js

gzip压缩

安装对应包

npm install compression -D

使用pm2管理应用

npm i pm2 -g

// 启动项目
pm2 start脚本  --name 自定义名称
pm2 start ./app.js --name web_vuedemo

[PM2] Spawning PM2 daemon with pm2_home=/Users/youmen/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /Users/youmen/Music/vue-template/app.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ web_vuedemo        │ fork     │ 0    │ online    │ 0%       │ 12.6mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

// 查看运行项目
pm2 ls
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ web_vuedemo        │ fork     │ 0    │ online    │ 0%       │ 34.5mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

// 重启项目
pm2 restart 自定义名称


// 停止项目
pm2 stop 自定义名称(或者id)


// 删除项目
pm2 

方式2 server

// 一般做预览使用

npm install -g serve
serve -s dist

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:5000       │
   │   - On Your Network:  http://192.168.43.84:5000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘