vue项目如何部署?history与hash模式部署时的区别
一、如何部署
前后端分离开发模式下,前后端是独立布署的
我们知道vue项目在构建后,是生成一系列的静态文件
前端只需要将其上传至目标服务器的web服务指定的静态目录下即可
二、404问题
我们先还原一下场景:
vue项目在本地时运行正常,但部署到服务器中,刷新页面,出现了404错误
先定位一下,HTTP 404 错误意味着链接指向的资源不存在
问题在于为什么不存在?且为什么只有history模式下会出现这个问题?
1、为什么history模式下有问题
Vue是属于单页应用(SPA)
而SPA是一种网络应用程序,所有与用户交互都是通过动态重写当前页面来实现页面变化的,前面我们也看到了,不管我们应用有多少页面,构建物都只会产出一个index.html
现在,我们回头来看一下我们的nginx配置:
server {listen 80;server_name www.xxx.com;location / {index /data/dist/index.html;}
}
可以根据 nginx 配置得出,当我们在地址栏输入 www.xxx.com 时,
这时会打开我们 dist 目录下的 index.html 文件,然后我们在跳转路由进入到 www.xxx.com/login,
关键在这里,当我们在 www.xxx.com/login 页执行刷新操作,nginx location 是没有相关/login配置的,所以就会出现 404 的情况
2、为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的,如 website.com/#/login, hash 的值为 #/login
它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对服务端完全没有影响
,因此改变 hash 不会重新向服务端发送请求。而改变hash,在hash模式中会被hashChange方法所捕获,在vue中会触发页面的修改。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 website.com/#/login 只有 website.com 会被包含在请求中 ,因此对于服务端来说,即使没有配置location,也不会返回404错误
3、 解决方案
产生问题的本质是因为我们的路由是通过JS来执行视图切换的,
当我们进入到子路由时刷新页面,在history模式下web服务器没有相对应的页面此时会出现404
所以我们只需要配置将任意页面都重定向到 index.html,把路由交由前端处理
3.1、前端配制
const router = new VueRouter({// 定义为history模式mode: 'history',
// 如果包并非部署在指定服务的根目录下,则需要添加服务根目录到index.html的路径;base:'/zxy/', routes: [{ path: '*', component: NotFoundComponent }]
})
针对base的举例说明
3.2、服务端配制
第一步,判断对nginx配置文件.conf如何修改,
- 如果服务部署在根目录上,则添加
try_files $uri $uri/ /index.html
; - 如果服务部署不在根目录上,则需要指定相应的从根目录开始的路径,例如:我的nginx中此服务的根目录是webapp目录,而我将文件放在zxy目录下,所以添加配制如下
try_files $uri $uri/ /zxy/index.html
- 第二步,具体nginx.conf配制修改如下
server {listen 9000;server_name localhost;location / {root webapp;index index.html index.htm;} # 这个是新增的配制location /zxy {root webapp;index index.html index.htm;try_files $uri $uri/ /zxy/index.html; #针对history模式,刷新出现404问题}}
这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。
- 第三步,访问 localhost:9000/zxy
参考链接:https://mp.weixin.qq.com/s/i9XSiIMn-jc3KQwZntHTug
vue项目如何部署?history与hash模式部署时的区别相关推荐
- 解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因 艰难路程 解决办法 艰难路程 事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
- 创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目 创建前的准备 开始创建 创建过程 项目正常创建 使用v ...
- vue 项目打包通过命令修改 vue-router 模式,修改 API 接口前缀
需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上 ...
- vue项目在ie、360兼容模式页面显示空白问题
vue项目中,出现在ie与360兼容模式下打开页面呈现空白问题,如下: 控制台报main.js中语法错误~ 上网搜了一下,大部分解决方案是在webpack配置中与main.js中引入babel-pol ...
- Java单机部署,Nacos docker单机模式部署实现过程详解
Nacos 的部署,我使用的时docker 部署(单机模式 mysql),官网文档:https://nacos.io/zh-cn/docs/quick-start-docker.html 拉取代码: ...
- 解决vue项目在ie和360兼容模式下显示空白页问题
艰难路程 记一次bug解决,项目不复杂,是一个基于vue-cli3搭建的pc端项目,之前开发都是在谷歌浏览器上运行的,但在开发进入到后半段,经理说,项目需要在360兼容模式下展示,这时候发现项目在36 ...
- vue项目中,360浏览器兼容模式下部分页面显示不出来
1.问题 在项目中引用了百度地图,但是在360浏览器的兼容模式下无法显示 兼容模式可能就是为了兼容IE7之前的网站代码 , 而非我们字面理解的'兼容'二字 2.解决 告诉浏览器最少使用IE11的内核去 ...
- Vue项目目录结构注解附assets与static目录的区别
static与assets的区别: 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loa ...
- Nginx下同域部署多个Vue项目(history路由模式),报404、500错误
主要内容 一.环境 二.问题描述 三.问题解决 1.修改vue项目中的vue.config.js文件 2.修改Nginx的nginx.conf配置文件 3.Nginx目录结构 一.环境 系统: win ...
- VueRouter — vue路由hash模式和history模式
目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...
最新文章
- JVM:StringTable
- SecureCRT错误:The client has
- MySQL 遇到的问题
- 如果有人问你关系数据库的工作原理,叫他看这篇文章How does a relational database work
- 软件工程--需求分析
- sql数据库常见命令总结
- linux安装apache下载文件,Linux安装apache详解
- 计算机接口教程,运用接口实现计算机各组件信息
- 【OpenCV 例程200篇】20. 图像的按位运算
- VMware vRealize Operations Manager SSRF漏洞(CVE-2021-21975、SSRF)
- openresty 搭建
- java sql变更存储,MySQL更改数据库数据存储目录,mysql数据存储
- Cause: the class org.apache.tools.ant.taskdefs.optional.junit.JUnitTask was not found
- 20个Android游戏源码,…
- vba 正与服务器联系以获取信息,vba读取云服务器的数据库连接
- 无法连接outlook邮箱服务器,OUTlOOK最近登不上
- amr文件怎么转换成mp3格式?
- HTML5--2 HTML标签
- kindle 4.1.1越狱换中文字体
- 修改MySQL数据库的密码