Vue学习第35天——模拟项目上线基本流程

news/2024/5/16 20:14:34/文章来源:https://blog.csdn.net/Vest_er/article/details/127159006

一、打包

将.vue文件生成为.html、.css、.js文件

npm run build

执行完之后，会在项目中生成一个dist文件（执行的速度取决于项目的大小以及电脑的配置）
在这里插入图片描述

二、创建服务器

没有后端服务器，这里我们使用node.js + express 搭建一个服务器

1、新建demo文件夹，快速初始化

npm init -y

（现代项目都是从package.json 文件开始的，但是这个文件里字段信息太多，因此npm提供了 npm init -y 命令帮助我们快速初始化 package.json 文件）
在这里插入图片描述

2、下载express

npm i express

3、创建server.js文件，搭建服务器

//引入express
const express = require("express");//创建一个app服务实例对象
const app = express();//服务器端口为5005
app.listen('5005',(err)=>{if(!err) {console.log('服务器搭建成功');}
})

在这里插入图片描述

4、快速托管静态资源

① 新建一个static文件夹
② 使用中间件express.static快速托管静态资源（将静态资源与服务器链接起来）

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

在这里插入图片描述

5、启动服务器

node server

三、部署

打包完的文件需要放在服务器上static文件夹（前端静态资源放在服务器的static或public文件夹）
在这里插入图片描述
浏览器输入：http://localhost:5005 运行项目

四、刷新页面报错解决方法

当我点击喵喵院系再刷新页面时，会报404错误
在这里插入图片描述

1、报错原因

这是因为我的vue项目中，路由的工作模式配置的为mode：'history'
当页面在 http://localhost:5005/cats 时，点击刷新，history模式会把 /cats 也带向服务器，但是服务器没有 /cats 路径的接口，因此报错404

2、解决方法

① 将项目中的history模式改为hash模式，重新打包上线

mode:'hash'

hash模式下，路径后面会出现一个#号，点击刷新时，#及后面的所有路径都不会向服务器发送请求，因此刷新页面不会报错

缺点：不美观；如果通过第三方app分享时，若app校验严格，则地址会被标记为不合适
在这里插入图片描述
② 使用node.js中间件connect-history-api-fallback
history模式刷线报错，需要后端工程师配合。
这里使用connect-history-api-fallback后端插件：专门解决history模式的404错误

下载

npm i connect-history-api-fallback

引入

const history = require('connect-history-api-fallback');

使用（必须在配置静态资源之前使用）

app.use(history())

server.js完整代码

//引入express
const express = require("express");//引入中间件connect-history-api-fallback
const history = require('connect-history-api-fallback');//创建一个app服务实例对象
const app = express();//使用（必须在配置静态资源之前使用）
app.use(history());//使用中间件express.static快速托管静态资源
app.use(express.static(__dirname + '/static'))//服务器端口为5005
app.listen('5005',(err)=>{if(!err) {console.log('服务器搭建成功');}
})