vue项目--利用node+express搭建微型服务器

没品芒果

已于 2022-07-19 12:45:35 修改

阅读量589

点赞数 2

分类专栏： vue 文章标签： vue.js 服务器前端

于 2022-07-19 12:40:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46603570/article/details/125869109

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

前言

本文是利用node+express搭建微型服务器，实现vue项目的打包实现。本文例子参考的是尚硅谷的vue-p133，这里https://www.bilibili.com/video/BV1Zy4y1K7SH?p=133&spm_id_from=pageDriver&vd_source=2aea10f396aee4be718c24a8b7c97670

具体步骤

1.安装

1.新建文件夹demo，在code打开
在这里插入图片描述
2.将demo变成一个合法的包

2.部署

1.在demo文件夹下新建server.js
在这里插入图片描述
代码如下:

const express=require('express')

const app=express()
app.use(express.static(__dirname+'/static'))

app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:18,
    })
})

app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功了')
})

2.在demo文件下新建static文件
在这里插入图片描述
3.将你需要的vue项目打包成dist文件里的所有文件拖拽到static文件里。

3.实现

1.启动服务器
在这里插入图片描述
2.打开浏览器

总结

报错：
如果项目没有使用网络请求报错，主要检查vue项目是否使用history模式，将history改为hash，因为hash的兼容性更强。（使用history需要后端搭配，具体见视频）
笔记：
路由器的两种工作模式
1.对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值
2.hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器

3.hash模式：
地址中永远带着#号，不美观
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
兼容性较好

4.history模式：
地址干净，美观
兼容性和hash模式相比略差
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题