美文网首页
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