最近跟着某机构的教学视频敲了一遍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的问题的更多相关文章

  1. 解决vue项目运行过程中,npm run dev 报错问题

    [方案1] 错误如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev: `webpack-dev-server ...

  2. angular4.0项目build发布后,刷新页面报错404

    angular4.0项目执行npm run build后,进入页面正常显示. 但是当刷新页面时,报错404,页面未找到. 出现这个问题的原因,应该是找不到路由地址导致的,然后找到了下面的解决方案. 找 ...

  3. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  4. Vue 项目在其他电脑 npm run dev 运行报错的解决方法

    一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法.   报错原因 ...

  5. 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(模版 ...

  6. 解决vue.js在编写过程中出现空格不规范报错的情况

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...

  7. 解决 maven 项目中加入了 lombok 库后依然报错的问题

    平时我们采用 maven 引入第三方库,可以方便的管理第三方 jar 包,然加入 lombok 后启动 eclipse 依然报错,这是由于 lombok 是通过反射在运行时自动生成 getter(). ...

  8. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  9. 解决vue项目打包后背景图片找不到的问题

    在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",

随机推荐

  1. WPF 勾选划线

    最近项目需要一个左右侧一对多的划线功能 我们先来看一下效果秃: 主要功能: 支持动态添加 支持复选 支持修改颜色 支持动态宽度 主要实现:事件的传递 应用场景:购物互选,食品搭配,角色互选 数据源 左 ...

  2. Inject-APC(Ring0)

    1 #include "stdafx.h" 2 #include <iostream> 3 #include <Windows.h> 4 #include ...

  3. kubernetes 安装 ingress controller

    文章链接 ingress-nginx ingress 官方网站 ingress 仓库地址 ingress-nginx v1.0 最新版本 v1.0 适用于 Kubernetes 版本 v1.19+ ( ...

  4. ubuntu-常用设置备忘

    环境 系统平台:Ubuntu 16.04.6 其他版本设置也差不多 vim喜好设置 系统安装vim sudo apt-get install vim 通过修改 /etc/vim/vimrc 文件设置 ...

  5. Git 系列教程(13)- 分支管理

    查看分支列表 $ git branch iss53 * master testing  注意 master 分支前的 * 字符:它代表现在 checkout 的那一个分支(也就是说,当前 HEAD 指 ...

  6. Docker入门之image篇

    基本概念 Image 镜像:只读模板 Container 容器:从镜像创建的运行实例 Repository 仓库:集中存放镜像文件的场所.分为公开仓库(Public)和私有仓库(Private)两种形 ...

  7. JS007. 深入探讨带浮点数运算丢失精度问题(二进制的浮点数存储方式)

    复现与概述 当JS在进行浮点数运算时可能产生丢失精度的情况: 从肉眼可见的程度上观察,发生精度丢失的浮点数是没有规律的,但该浮点数丢失精度的问题会100%复现.经查阅,这个问题要追溯至浮点数的二进制存 ...

  8. Windows中nginx多次启动的问题

    在Windows上做开发环境中的nginx服务器.为了使nginx在后台运行,使用如下命令来启停nginx: cd <nginx安装目录> # 开启nginx并在后台运行 start ng ...

  9. SpingBoot-Dubbo-Zookeeper-分布式

    目录 分布式理论 什么是分布式系统? Dubbo文档 单一应用架构 垂直应用架构 分布式服务架构 流动计算架构 什么是RPC RPC基本原理 测试环境搭建 Dubbo Dubbo环境搭建 Window ...

  10. vue el-transfer新增拖拽排序功能---sortablejs插件

    <template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 -  --> ...