前端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）来访问项目。（注意：这里就是上面说的，要想成功访问服务器，必须先执行此操作，不然服务器会拒绝访问！）