解决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:"../../",
随机推荐
- JSP页面添加当前时间
JSP页面添加当前时间 一.时间格式化 1.引入标签 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/js ...
- (一)响应式web设计。。。freecodecamp笔记
HTML基础 HTML 的全称是 HyperText Markup Language(超文本标记语言),它是一种用来描述网页结构的标记语言. h1用作主标题,h2用作副标题,还有h3.h4.h5.h6 ...
- CentOS 6.x 系统中安装原生 Hadoop 2
2020年整理博客发现原文地址已经失效,推荐学习地址厦门大学数据库实验室 本教程适合于在 CentOS 6.x 系统中安装原生 Hadoop 2,适用于Hadoop 2.7.1, Hadoop 2.6 ...
- js之window对象(慕课网学习笔记)
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...
- ubuntu 查看系统信息
1.系统信息 uname -a 显示linux的内核版本和系统是多少位的:X86_64代表系统是64位的. Linux field-ubuntu-18 4.15.0-20-generic #21-Ub ...
- ES6扩展——对象的扩展(简洁表示法与属性名表达式)
1.简洁表达法. 当属性名与属性值相同时,可省略属性值:例如:{name : name}可以写成 {name} 属性方法中,可省略冒号与function,直接 属性名(){}即可.例如{say : f ...
- MySQL 事务和锁
1. 事务 1.1 什么是事务? 1.2 事务的特性:ACID 1.3 事务语句 1.4 事务的隔离级别 1.5 锁 1.6 事务隔离解决并发问题 2. 死锁 2.1 场景示例 2.2 死锁调优 3. ...
- ECMAScript版本知识点汇总
ECMAScript版本知识点汇总 ES5 btoa.atob 对参数进行base64格式编码.解码 /** * btoa() * base64编码 * @param {string} str * @ ...
- 安装 Ubuntu 21.04 后必备的绝佳应用大合集(持续更新中)
@ 目录 一.Google Chrome 浏览器 1.下载 2.安装 3.设置搜索引擎 二.火焰截图(替代QQ截图) 1.简介: 2.安装: 3.设置快捷键: 三.VLC视频播放器(替代Potplay ...
- Junit5快速入门指南-3
Fixtures 是测试中非常重要的一部分.他们的主要目的是建立一个固定/已知的环境状态以确保 测试可重复并且按照预期的方式运行.比如在app测试中 基类@BeforeClass 配置初始化,初始化d ...