vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
一、如何部署
前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web
容器指定的静态目录下即可
我们知道vue
项目在构建后,是生成一系列的静态文件
常规布署我们只需要将这个目录上传至目标服务器即可
// scp 上传 user为主机登录用户,host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx
让web
容器跑起来,以nginx
为例
server {
listen 80;
server_name www.xxx.com; location / {
index /data/dist/index.html;
}
}
配置完成记得重启nginx
// 检查配置是否正确
nginx -t // 平滑重启
nginx -s reload
操作完后就可以在浏览器输入域名进行访问了
当然上面只是提到最简单也是最直接的一种布署方式
什么自动化,镜像,容器,流水线布署,本质也是将这套逻辑抽象,隔离,用程序来代替重复性的劳动,本文不展开
二、404问题
这是一个经典的问题,相信很多同学都有遇到过,那么你知道其真正的原因吗?
我们先还原一下场景:
vue
项目在本地时运行正常,但部署到服务器中,刷新页面,出现了404错误
先定位一下,HTTP 404 错误意味着链接指向的资源不存在
问题在于为什么不存在?且为什么只有history
模式下会出现这个问题?
为什么history模式下有问题
Vue
是属于单页应用(single-page application)
而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
关键在这里,当我们在 website.com/login
页执行刷新操作,nginx location
是没有相关配置的,所以就会出现 404 的情况
为什么hash模式下没有问题
router hash
模式我们都知道是用符号#表示的,如 website.com/#/login
, hash
的值为 #/login
它的特点在于:hash
虽然出现在 URL
中,但不会被包括在 HTTP
请求中,对服务端完全没有影响,因此改变 hash
不会重新加载页面
hash
模式下,仅 hash
符号之前的内容会被包含在请求中,如 website.com/#/login
只有 website.com
会被包含在请求中 ,因此对于服务端来说,即使没有配置location
,也不会返回404错误
解决方案
看到这里我相信大部分同学都能想到怎么解决问题了,
产生问题的本质是因为我们的路由是通过JS来执行视图切换的,
当我们进入到子路由时刷新页面,web
容器没有相对应的页面此时会出现404
所以我们只需要配置将任意页面都重定向到 index.html
,把路由交由前端处理
对nginx
配置文件.conf
修改,添加try_files $uri $uri/ /index.html;
server {
listen 80;
server_name www.xxx.com; location / {
index /data/dist/index.html;
try_files $uri $uri/ /index.html;
}
}
修改完配置文件后记得配置的更新
nginx -s reload
这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html
文件
为了避免这种情况,你应该在 Vue
应用里面覆盖所有的路由情况,然后在给出一个 404 页面
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
关于后端配置方案还有:Apache
、nodejs
等,思想是一致的,这里就不展开述说了
参考文献
- https://juejin.cn/post/6844903872637632525
- https://vue-js.com/topic/5f8cf91d96b2cb0032c385c0
vue项目本地开发完成后部署到服务器后报404是什么原因呢?的更多相关文章
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- 在windows下导入react项目并且打包编译后部署到nginx上
在windows下导入react项目并且打包编译后部署到nginx上 一.安装npm 二.创建react项目 三.安装nginx 四.总结 最近接手了公司的一个django项目,这是应该前后端分离的项 ...
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- vue项目使用hbuilder打包后,真机测试白屏
在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- Vue项目在Docker的自动化部署
操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...
- vue项目 首页开发 part2
知识点回顾 git clone: 从远程服务器克隆一个一模一样的版本库到本地,复制的是整个版本库, 叫做clone.(clone是将一个库复制到你的本地,是一个本地从无到有的过程) 1. 创建分支 进 ...
随机推荐
- C# 12 中新增的八大功能你都知道吗?
前言 转眼之间C#都已经更新到了12了,那么C# 12 中新增的八大功能你都了解过吗?今天我们来简单介绍一下C# 12 中新增的八大功能. C#/.NET该如何自学入门?:https://www.cn ...
- NC24727 [USACO 2010 Feb G]Slowing down
题目链接 题目 题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered ...
- SpringBoot整合Groovy脚本,实现动态编程
Groovy简介 Groovy 是增强 Java 平台的唯一的脚本语言.它提供了类似于 Java 的语法,内置映射(Map).列表(List).方法.类.闭包(closure)以及生成器.脚本语言不会 ...
- nginx中使用perl脚本来定制一些请求转发等等
http://t.zoukankan.com/carriezhangyan-p-9359708.html https://blog.csdn.net/weixin_28917223/article/d ...
- 第一百零九篇:基本数据类型(String类型)
好家伙, 本篇内容为<JS高级程序设计>第三章学习笔记 1.String类型 字符串类型是最常用的几个基本类型之一 字符串可以使用双引号,单引号以及反引号(键盘左Tab上面那个)标示 ...
- elasticsearch 查询索引和清理索引命令
查询 curl --silent 'http://127.0.0.1:9200/_cat/indices' 删除 curl -X DELETE "localhost:9200/wifiloc ...
- 【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像,如何配置监听端口呢?
问题描述 根据以下DockerFile文件,创建了一个ASP.NET Core的 helloworld 镜像,通过监听3721端口来接受请求. # 1. 指定编译和发布应用的镜像 FROM mcr.m ...
- Kotlin扩展函数与属性原理解析
一.扩展函数 扩展函数可以方便地给现有类增加属性和方法而不改动类地代码. 二.原理 fun String.addTo(s: String): String{ return this + s } 反编译 ...
- 为Oracle链接服务器使用分布式事务
1 现象 在SQL Server中创建指向Oracle的链接服务器,SQL语句在事务中向链接服务器插入数据.返回链接服务器无法启动分布式事务的报错. 2 解决 在Windows平台下,SQL Serv ...
- 深入解析ASP.NET Core MVC应用的模块化设计[上篇]
ASP.NET Core MVC的"模块化"设计使我们可以构成应用的基本单元Controller定义在任意的模块(程序集)中,并在运行时动态加载和卸载.这种为"飞行中的飞 ...