前端VUE项目部署到服务器

前端VUE项目部署到服务器

具体步骤：
一、先运行前端VUE项目的“build”任务，会得到一个“dist”打包文件。
二、在项目文件夹同级目录下新建文件夹“XXX_server”。例如我的项目名称为“shop”，那么我在与“shop”同级目录下新建一个叫“shop_server”的文件夹。创建好之后用VScode打开。
三、在VScode中打开终端（Ctrl+Esc下方的键），在终端中运行npm init -y,然后运行npm i express -s,可以看到此时文件夹中多了一几个文件：

将“dist”文件复制进“shop_sever”文件夹中。

四、将“dist”打包文件部署到服务器端，即可通过服务器访问该项目。（注：在访问之前必须先启动服务器）

（1）在VScode中新建一个文件（在根目录中新建），名称为：app.js

（2）在该文件中写入一下代码：

// 1.导入服务器 const express = require('express') 

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

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

// 3.启动web服务器（80为端口号） app.listen(80,() => { console.log('server running at http://127.0.0.2') }) 

五、启动服务器：在终端窗口中输入node .\app.js来启动服务器，此时可以通过对应服务器地址（http://127.0.0.2）来访问项目。（注意：这里就是上面说的，要想成功访问服务器，必须先执行此操作，不然服务器会拒绝访问！）。关于服务器管理还可以使用pm2来进行管理，具体操作见博主另一篇文章传送门

海报图正在生成中...

竖版 宽版