一、打包
将.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('服务器搭建成功');
}
})
重新启动服务器
node server
运行结果