解决Vue项目打包之后放到nginx下刷新就报错404的问题
最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误
前端项目构建vue 脚手架版本 是@vue/cli 4.3.1,构建项目之后没有config.js文件。无奈按照网上说的最简单的办法
就是将router模式改为默认的hash模式不使用history模式,然后部署到nginx下就能正常刷新了
server {
listen 8067;
server_name localhost;
#proxy_set_header X-Forwarded-Host $host;
#proxy_set_header X-Forwarded-Server $host;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
root dist;
index index.html index.htm
try_files $uri $uri/ /dist/index.html;
} }
刷新之后
刷新之后没有再出现404的问题了
---------------------2020/9/1 更新-修正windows环境nginx history模式刷新失败的问题----------------------------
nginx存放路径
nginx 的配置
刷新之后完美解决报错的问题
解决Vue项目打包之后放到nginx下刷新就报错404的问题的更多相关文章
- 解决vue项目运行过程中,npm run dev 报错问题
[方案1] 错误如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev: `webpack-dev-server ...
- angular4.0项目build发布后,刷新页面报错404
angular4.0项目执行npm run build后,进入页面正常显示. 但是当刷新页面时,报错404,页面未找到. 出现这个问题的原因,应该是找不到路由地址导致的,然后找到了下面的解决方案. 找 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
- Vue 项目在其他电脑 npm run dev 运行报错的解决方法
一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 ...
- Vue项目用了脚手架vue-cli3.0,会报错You are using the runtime-only build of Vue where the template compiler is not available.....
摘自: https://blog.csdn.net/wxl1555/article/details/83187647 报错信息如下图: 报错原因是:vue有两种形式的代码:一种是compiler(模版 ...
- 解决vue.js在编写过程中出现空格不规范报错的情况
找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...
- 解决 maven 项目中加入了 lombok 库后依然报错的问题
平时我们采用 maven 引入第三方库,可以方便的管理第三方 jar 包,然加入 lombok 后启动 eclipse 依然报错,这是由于 lombok 是通过反射在运行时自动生成 getter(). ...
- vue项目打包部署到nginx 服务器上
假如要实现的效果如下 http://ip/vue =>是进入首页访问的路径是 usr/local/nginx/html/vue http://ip/website =>是进 ...
- 解决vue项目打包后背景图片找不到的问题
在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",
随机推荐
- NameNode&Secondary NameNode 工作机制
NameNode&Secondary NameNode 工作机制 NameNode: 1.启动时,加载编辑日志和镜像文件到内存 2.当客户端对元数据进行增删改,请求NameNode 3.Nam ...
- WPF---数据绑定之PasswordBox绑定(八)
一.概述 众所周知,绑定的源既可以是依赖属性也可以是普通的CLR属性,而绑定的目标只能是依赖属性. 控件PasswordBox的Password属性不是依赖属性,不可以作为绑定的目标与后台数据进行绑定 ...
- Commons-Collections(二)之map
BidiMap: 双重Map 使用双向映射,可以使用值查找键,并且可以使用键轻松查找值.(自然,它可以根绝key移除,也可以根据value移除) public interface BidiMap< ...
- Java String.split()的特殊用法
1 //用多种字符分隔字符串 2 public class Main { 3 /* 4 * "(1,2),(2,4),(3,6),(4,7)"按[(),]分隔 5 * 空白(1,2 ...
- Flink的状态管理与恢复机制
参考地址:https://www.cnblogs.com/airnew/p/9544683.html 问题一.什么是状态? 问题二.Flink状态类型有哪几种? 问题三.状态有什么作用? 问题四.如何 ...
- Git (13) -- Git 分支 -- 分支的新建与合并
@ 目录 0.准备工作 1.新建分支 一个简单提交历史: 创建一个新分支指针: iss53 分支随着工作的进展向前推进: 基于 main 分支的紧急问题分支 hotfix branch: main 被 ...
- linux》centos6.1.环境下发送邮件设置
转自https://blog.csdn.net/bodybo/article/details/80817968 一. Sendmail安装 在CentOS下,sendmail一般默认是随操作系统一起安 ...
- Java的Class类及static块的执行时机
要理解RTTI在Java中的工作原理,首先必须知道类型信息在运行时是如何表示的,这项工程由Class对象完成,它包含了与类有关的信息.Java使用Class对象来执行其RTTI,即使你执行的是类似转型 ...
- 基于Linux系统ipython和集成开发环境Pycharm的安装
1.简介 Python是一门跨平台的开源.免费的.解释型.面向对象.带有动态语义的脚本语言,同时也支持伪编译以进行优化和提高运行速度,还支持使用py2exe工具将Python程序转换为exe可执行程序 ...
- 从零开始实现简单 RPC 框架 8:网络通信之 Request-Response 模型
Netty 在服务端与客户端的网络通信中,使用的是异步双向通信(双工)的方式,即客户端和服务端可以相互主动发请求给对方,发消息后不会同步等响应.这样就会有一下问题: 如何识别消息是请求还是响应? 请求 ...