将 Vue 打包生成的 dist 文件运行在你的服务器上(最全教程)
将 Vue 打包生成的 dist 文件运行在你的服务器上(最全教程)你可能需要用到的工具:PuTTY、FileZilla1 在服务器(CentOS)上安装 Node参考文章:https://zhuanlan.zhihu.com/p/1267047111️⃣在服务器上找好(创建) Node 的安装位置,例如:/usr/local/temp2️⃣在 Node 中文网下载 Node 安装压缩包3️⃣在第
你可能需要用到的工具:PuTTY、FileZilla
一、在服务器(CentOS)上安装 Node
参考文章:https://zhuanlan.zhihu.com/p/126704711
1️⃣在服务器上找好(创建) Node 的安装位置,例如:
/usr/local/temp
2️⃣在 Node 中文网下载 Node 安装压缩包
3️⃣在第 1 步的安装位置处下载 Node 安装压缩包
wget https://npm.taobao.org/mirrors/node/v16.8.0/node-v16.8.0-linux-s390x.tar.gz(你复制的链接地址)
4️⃣解压
tar -xvf node-v16.8.0-linux-s390x.tar.gz(你下载的压缩包)
5️⃣进入解压后的安装包,执行命令安装 Node 的依赖组件
cd node-v16.8.0-linux-s390x
yum install gcc gcc-c++
6️⃣重命名 node-v16.8.0-linux-s390x 为 Node
cd ..
mv node-v16.8.0-linux-s390x Node
7️⃣建立软连接(类似于 Windows 中配置环境变量),这样你在服务器的其他目录就可以使用 node、npm 等命令行工具
ln -s /usr/local/temp/Node.js/bin/node /usr/bin/node
ln -s /usr/local/temp/Node.js/bin/npm /usr/bin/npm
ln -s /usr/local/temp/Node.js/bin/npx /usr/bin/npx
8️⃣成功。在你的命令行中输入 node、npm 看看吧。
二、在服务器(CentOS)上安装 express-generator 生成器(用于运行 dist 文件)
在此之前,你需要确保你的服务器已经成功安装了 Node
参考文章:https://www.cnblogs.com/zhujiabin/p/10557982.html
1️⃣安装 express-generator
npm install -g express-generator
2️⃣创建一个 express 项目
express projectName(你的项目名)
# 下面我会一直用 projectName,在实际操作中,你需要将其换成你自己的项目名
3️⃣进入 projectName 文件,安装项目依赖
cd projectName
npm install
4️⃣把 dist 文件下的所有文件复制到 projectName 文件下的 public 文件中(public 文件中可能已经存在其他文件,不用管)
这里你可能会用到 FileZilla,如果你还不知道它怎么使用,百度一下吧。
5️⃣启动项目
pwd # -> projectName
# 一定要确保在 projectName 目录下运行以下命令
npm start
6️⃣在浏览器中输入:你的服务器IP/域名:3000
7️⃣成功。
8️⃣关闭 PuTTY。
9️⃣去浏览器刷新第 6 步的网页。你可能会***,怎么回事,看下面。
三、Linux 守护进程
参考文章:http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html
上一步中的网页无法访问,大概是因为你关闭 PuTTY 的时候,项目进程也被关闭了,所以我们需要守护进程(在关闭 PuTTY 后,项目依然在后台运行)。
这里我只介绍参考文章中的一种方法,也是我成功守护进程的方法:Screen 命令。其他方法你们可以去看参考文章,文章中提及的有些方法可能不成功,也许是我操作方法不对吧,如果你们操作成功了,可以给我留言哦。
1️⃣安装 Screen
yum install screen
2️⃣新建一个 session
screen
pwd # -> projectName
npm start
3️⃣按下 Ctrl + A
和 Ctrl + D
回到原来的 session。
4️⃣关闭 PuTTY,去浏览器刷新网页。
5️⃣成功。
四、最后
我没有附上我操作过程的截图,如果大家在实际操作过程中遇到问题的话,欢迎在评论区留言讨论。
更多推荐
所有评论(0)