Vue学习第35天——模拟项目上线基本流程
一、打包
将.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
运行结果
相关文章
- vue解决IOS10低版本白屏问题
- vue.js3:用vue-qr生成二维码并下载(vue@3.2.36 / vue-qr@4.0.9)
- vue-cli3的eslint配置问题
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- Vue入门教程:node安装vue命令行工具及启动项目
- vue定义一个变量并显示
- SAP Fiori和Vue的结合会给企业级应用软件的UI开发带来什么?
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- vue-route(三)后台管理路由配置
- 228:vue+openlayers绘制多边形,drawend获取到多边形的所有点坐标
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- Vue 页面渲染的流程
- 对Vue中keep-alive的理解
- Vue this.$refs的作用
- Vue学习笔记——vue-router