Npm 运行本地 html 及部署至宝塔记录

1
2
3
4
5

npm init


npm i live-server --save-dev
1
2
3
4
5
6
7
npm cache clean --force

#更换成淘宝的源
npm config set registry https://registry.npm.taobao.org

#– 配置后可通过下面方式来验证是否成功
npm config get registry
1
2
3
"dev": "live-server",

"dev": "./node_modules/.bin/live-server --port=50488",
1
2
3
4
npm cache clean --force
pm2 start --name pacman npm -- run dev
pm2 save
pm2 list

pm2 后台运行

1
npm install pm2

关闭项目
先查找 ID

1
pm2 status

然后，停止相应项目的 id

1
pm2 stop id

pm2 删除项目

1
pm2 delete  id

Pm2 部署

1
2
3
4
5
6
7
8
pm2 start --name pacman npm -- run dev


pm2 save

pm2 list

pm2 log <name>

部署 vue 项目

先将前端 Vue 项目打包生成dist文件夹

1
npm run build

服务器安装环境

1
2
3
mkdir

cd demo-vue

初始化包管理配置文件

1
npm init -y

安装 express (可以通过 express 快速创建 web 服务器)

1
npm i express -S

开启 gzip 配置

1
npm i compression -S

进入 dist 文件夹内 创建配置启动文件,在 dist 生产发布包根目录下，创建启动文件 index.js(文件名可自定义)

1
2
cd dist/
vim app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require('express')
const compression = require("compression") //gzip包
const fs = require('fs')

const app = express()
app.use(compression()) // 启用gzip代码压缩
app.use(express.static('./')) //托管静态资源
app.get('/*', function(req, res) {
  const html = fs.readFileSync('./index.html', 'utf-8')
  res.send(html)
})

//启动应用，端口为8081
app.listen(8081)

在 dist 目录下启动项目
生成配置文件

1
2
pm2 init simple

ecosystem.config.js

1
2
3
4
5
6
7
module.exports = {
  apps : [{
    name   : "app1",
    script : "./app.js"
  }]
}

1
vim ecosystem.config.js

启动项目

1
2
3
pm2 start
pm2 save
pm2 list

参考：
宝塔部署 nodejs 项目
PM2 部署,关闭, 删除，日志
使用 pm2+express 部署 vue 项目
如何使用 pm2 部署 vue 项目暨 vue 打包教程
使用 pm2 部署 vue(node)项目