Vue 项目上线到 Centos 系统

Vue 项目发布流程 linux版

一、通过node创建 Web 服务器

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

主要代码如下：

const express = require('express')

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

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

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

 

1）新建 发布文件夹 admin_vue_server

 

2）vs code 初始化包管理配置文件

npm init -y

 

 安装 express 

npm i express -S

安装完成后，把打包好的 dist 文件夹拷贝到 admin_vue_server中

 

 新建 app.js

const express = require('express')

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

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

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

测试是否成功：

node ./app.js

浏览器中打开项目就启动了

 

 

 二、开启文件的ＧＺＩＰ网络传输压缩

 

 １、安装compression

npm install compression -S

2、app.js添加如下 标红 代码：

const express = require('express')
const compression = require('compression')

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

//顺序很重要，必须放在静态资源托管之前
app.use(compression())
//托管静态资源
app.use(express.static('./dist'))

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

重新启动项目，js实际加载会变小，实际73kb，加载了24kb，提高项目运行速度

 

 

三、使用pm2管理应用

 

 安装：

npm i pm2 -g

启动项目：

pm2 start "脚本" --name 自定义名称

例如：

//启动Netcore API项目

pm2 start "dotent testDemo.dll" --name testDemo

//启动vue项目
pm2 start "node ./app.js" --name adminVue

查看运行的项目：

pm2 ls

重启项目：

pm2 start 自定义名称

停止项目：

pm2 stop 自定义名称

删除项目：

pm2 delete 自定义名称