部署前端项目需要借助于服务器,这里介绍的是基于node 和 express搭建的一个简单的服务器
具体步骤:
1.新建一个文件夹,用来存放你的服务端代码,比如我的是thedeploymentof
(部署的意思)
2.初始化项目
npm init
3.安装express
框架
npm i express
4.在项目根目录下新建一个server.js
文件,也可以叫其他名字
server.js
代码:
const express = require('express') //引入express框架
const history = require('connect-history-api-fallback'); //这个库是专门解决当路由为history模式时,服务端部署以后页面刷新报404的问题,如果你用的是hash模式则不需要
const app = express() //创建一个应用
app.use(history()) //必须在使用静态服务器之前使用
app.use(express.static(__dirname + '/static')) //请求当前目录下的static下的资源,其中static文件夹时专门存放静态资源的
app.get('/person', (req, res) => { //当请求 http://localhost:5005/person时,返回一个对象
res.send({
name: 'tom',
age: 19,
sex: 'female'
})
})
app.listen(5005, (err) => { //监听5005端口
if (!err) {
console.log('服务器启动成功了');
}
})
5.一切准备就绪,最后把你vue项目打包后的(npm run build)
后的dist
目录下的所有文件复制到thedeploymentof/static
文件夹下面,最后在你的thedeploymentof
文件下下运行node server.js
,在浏览器地址栏中输入http://localhost:5005/
就可以看到你的前端项目了,至此,我们的项目就部署好了
网友评论