尚硅谷部署微型服务器（前端）并部署vue项目案例

最新推荐文章于 2024-05-13 19:02:29 发布

猫会走猫步

最新推荐文章于 2024-05-13 19:02:29 发布

阅读量737

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/new_baibai/article/details/128007311

版权

一：打包src文件并准备服务器

1、在已完成的vue项目中打包src目录：npm run build

打包完成后会生成文件夹：dist

（注意：如果这时候路由器的mode为history，先改为hash门后面也会有提醒）

2、新建文件夹用于建立微型服务器：demo，并初始化文件夹：npm init

输入命令后只需要给包取名字，其余回车即可

3、初始化完成之后新建服务器配置文件：server.js

输入内容配置文件内容：

const express = require('express')

const app = express()

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

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

4、启动服务器：node serve

5、测试访问服务器：http://localhost:5005/person

6、新建文件夹放置静态资源：static，并在里面新建文件：demo.html

7、往demo.html文件内添加内容，供于访问观看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>denmo</title>
</head>
<body>
    <h1>你好啊！</h1>
</body>
</html>

8、在server.js中使用中间架express.static对页面进行访问

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

9、将服务器重启测试访问demo页面

二：

1、将生成的dish文件内的所有文件放入新建服务器demo的static文件夹下

（记得先把原先vue项目的脚手架停掉）

2、开启服务之后测试访问

访问错误的话：

先去Local Storage中写入key-value：school-atguigu

这时候你访问其他几个组件是可以访问的，但是刷新就会报错，因为这时候是history模式

需要将history改为hash模式重新打包，并将新的dist文件赋值到服务器的static目录下即可

3、那如何解决history404问题

先将mode改为history并重新打包后复制到demo中的static文件夹中

（1）现在控制台下载中间件：npm i connect-history-api-fallback

并在server.js中引入：

var history = require('connect-history-api-fallback');
app.use(history())

引入之后重新开启服务器

这时候当路由器中的demo为hostory也可以刷新页面了。

猫会走猫步

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷部署微型服务器（前端）并部署vue项目案例

打包vue项目到自己部署的微型服务器（前端）（尚硅谷）
复制链接

扫一扫

尚硅谷部署微型服务器（前端）并部署vue项目案例

“相关推荐”对你有帮助么？