12
前端VUE项目部署到服务器
source link: https://blog.csdn.net/weixin_44917754/article/details/112181079
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
1343
前端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来进行管理，具体操作见博主另一篇文章传送门
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK