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\n');
});
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! │
│ │
└───────────────────────────────────────────────────┘
Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置的更多相关文章
- django项目上线环境部署
django项目上线环境部署 第一步 安装python虚拟环境 1 安装虚拟环境virtualenv 2 安装virtualenvwrapper工具 3 确认virtualenvwrapper.sh脚 ...
- ubuntu环境部署项目
安装python3.6 第一步:sudo add-apt-repository ppa:jonathonf/python-3.6 如果报错为:sudo: add-apt-repository: com ...
- django+vue+nginx生产环境部署配置
部署环境: 1. linux redhat 7.1 2.python 3.6.3 3. vue 4. nginx 5. gunicorn 6. supervisord 安装: 一. 基础环境安装 1. ...
- PMP备考-第二章-项目运行环境与项目经理
组织系统的三大因素:组织治理框架,管理要素和组织结构 组织治理和项目治理 组织治理 :组织中的重要决策制定框架,谁有权在什么时候用什么发放做出并推行什么重要决策. 项目治理 :组织为项目建立的高级别的 ...
- spring boot (2):spring boot 打包tomcat、tomcat 部署多个项目、服务器部署项目SSL 设置(阿里云)
一.spring boot 内置tomcat配置https: 关于自签名证书可以看下上一篇 spring boot1 更详细的可以看转载 https://www.jianshu.com/p/8d4ab ...
- 【Tomcat】使用tomcat manager 管理和部署项目,本地部署项目到服务器
在部署tomcat项目的时候,除了把war文件直接拷贝到tomcat的webapp目录下,还有一种方法可以浏览器中管理和部署项目,那就是使用tomcat manager. 默认情况下,tomcat m ...
- Linux环境部署项目引起Out of Memory Error: PermGen Space的解决方案
1. 背景 前几天,在搭建项目时遇到到一些问题,现在整理记录一下. Linux环境:Red Hat Enterprise Linux Server release 6.4: # 查看命令cat /et ...
- workermanPHP聊天框架项目windows环境部署实践
一.官方下载地址: https://www.workerman.net/workerman-chat 二.下载后解压至任意目录,如下图: 三.windows需配置PHP环境变量,如下图: 四.双击st ...
- Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录
node.js官网下载并安装node 进入node文档目录下,运行cmd 输入 node -v 查看node版本 出现表示安装完成 输入 npm -v 显示npm版本信息 安装cnpm 输入 npm ...
随机推荐
- linux中suid/sgid/sticky及扩展属性(attr)
suid只适用于命令文件.(如/usr/bin/passwd) 当命令文件上有suid权限时,则操作用户的权限变成属主权限.命令文件上无suid权限则操作用户的权限不变. 查看suid权限: [roo ...
- HttpClient4.5X使用-集成微服务
HttpClient4.5X使用-集成微服务 1.什么是HttpClient HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直 ...
- python学习--sys.argv
sys.argv是获取命令行参数的: sys.argv[0]表示代码本身文件路径:从1开始获取参数. import sysprint (sys.argv[0])count = int(sys.argv ...
- 异或加密 - cr2-many-time-secrets(攻防世界) - 异性相吸(buuctf)
Crib dragging attack 在开始了解 Crib dragging attack 之前,先来理一理 异或. 异或加密 [详情请戳这里] XOR 加密简介 异或加密特性: ① 两个值相同时 ...
- Sound Forge批量转换音频格式,实现高效编辑音频
Sound Forge的批量处理功能可以实现批量格式转换.批量添加效果等功能,让用户可以在处理其他音频编辑任务的同时,自动完成格式转换.效果添加等重复性任务.接下来,一起来看看如何借助批处理转换器实现 ...
- 微课制作软件Camtasia中如何添加并编辑字幕?
除了能录制视频以外,Camtasia还能直接把录制下来的视频进行剪辑,并添加视频字幕等等一些后期效果.今天我们就来看一看字幕的添加方法. 导入视频 微课制作软件Camtasia录制的视频,默认在软件& ...
- Java中的接口与抽象类的区别
由于随着jdk版本的更新,在jdk1.8时,接口也增强了,所以我们分别来说明一下. (1)jdk1.8之前 在jdk1.8之前,接口里面只能定义抽象方法和常量:而抽象类比普通类有一点不同,就是抽象类里 ...
- 牛客练习赛67 D牛妹爱数列 题解(dp)
题目链接 题目大意 给你一个长为n的01串,要你进行最少的操作使得这01串变成全为0,求最少操作次数 有两种不同类型的操作 1:翻转一个前缀 2:单调翻转一个元素 题目思路 居然是一个dp,标程讲的很 ...
- Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree 题解(贪心+易错)
题目链接 题目大意 给你一课树,要你给每一条边分权值,每条边的权值大于0,他们的乘积等于k,而且要使得n-1条边1的数量尽可能少,定义 f(u,v)为u到v的边权和求 \(\max \sum_{i=1 ...
- Java反射——java.lang.Class和类的加载
反射的基础: java.lang.Class Class类的实例对象,用于记录类描述信息. 源码说:represent classes and interfaces in a running Java ...