美文网首页
vue项目部署

vue项目部署

作者: 5cc9c8608284 | 来源:发表于2022-03-23 18:21 被阅读0次

部署前端项目需要借助于服务器,这里介绍的是基于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/就可以看到你的前端项目了,至此,我们的项目就部署好了

相关文章

网友评论

      本文标题:vue项目部署

      本文链接:https://www.haomeiwen.com/subject/nykljrtx.html