华为云Windows Server服务器搭建Nodejs服务环境,打包部署上线Vue3项目详细教程。

一、Vue3项目打包

npm run build 

注意:打包之后本地会出现dist文件夹。将dist文件夹以及项目的package.json 文件上传到华为云Windows Server服务器上的WWW文件夹下面(此处随便什么位置,新建个文件夹就能放。)。
华为云Windows Server服务器搭建Nodejs服务环境,打包部署上线Vue3项目详细教程。_第1张图片

二、在本项目文件夹(Vite_book)当中安装express

npm install express --save

三、启动项目,新建项目入口启动文件,新建一个app.js文件

//定义目录
const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();
//vue目录
app.use(express.static(path.resolve(__dirname, './dist')))
 
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
//定义启动的端口号
app.listen(8080, function () {
    console.log('api server running at http://127.0.0.1:8080')
})

注意:项目启动端口号,必须在服务器的安全组进行配置,否则无法通过公网IP+端口访问线上项目。
华为云Windows Server服务器搭建Nodejs服务环境,打包部署上线Vue3项目详细教程。_第2张图片

四、项目启动

  1. 安装Node.js:https://nodejs.cn/
  2. 安装依赖包,如果系统中没有安装node,npm命令会找不到
npm install
  1. pm2安装(pm2具有自动重启进程、监控运行情况、多进程管理等功能)
npm install -g pm2
  1. 启动Vue3项目
//项目启动
pm2 start app.js
//项目监听
pm2 start app.js --watch -f
//项目停止
pm2 stop app.js

本文原创,原创不易,如需转载,请联系作者授权。

你可能感兴趣的:(服务器,Vue,Node.js,华为云,服务器,运维)