Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置
2020-12-11 16:54
1186 查看
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 vue-cli webpack打包部署上线前的配置操作,初建vue项目 webpack打包需要注意的配置
- NodeJS、NPM安装配置步骤(windows版本)+Vue项目从搭建环境到打包上线
- 浅谈vue项目打包优化策略
- vue 打包生成配置文件,方便外部修改公共路径,不用每次都进行打包部署
- 使用Ant构建web项目 从编译到测试 生成测试报告 打包 邮件发送 远程下载tomcat 部署运行一条龙服务之ant脚本...
- Vue项目打包部署到iis服务器的配置方法
- vue项目打包上线优化
- 【配置阿里云 I】申请配置阿里云服务器,并部署IIS和开发环境,项目上线经验
- vue+axios 开发环境与生产环境配置请求接口,本地开发和线上开发有多个请求地址怎么处理?上线后自动获取ip,不需改请求地址可运用多个项目中
- springboot项目配置多环境打包部署遇到的问题总结
- 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
- vue项目中运用webpack动态配置打包多种环境域名的方法
- Vue项目上线打包优化
- vue打包优化项目大小的配置
- vue 项目上线打包优化
- vue项目打包生成配置文件
- 浅谈vue项目打包优化策略
- vue-cli生成的项目配置开发和生产环境不同的接口
- 基于vue-cli 打包时抽离项目相关配置文件详解
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址