Vue 打包部署到服务器后,非主页刷新后出现404问题解决
开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现

被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以下是我自己跳坑的方法:
我用的是phpStudy执行环境,有点low,小项目啦,访问量也不多。
首先参考牛人的技术博客得到启示。
打开Apache的rewrite功能:
1)在windows环境下:
打开您的apache安装目录 “/apache/conf/” 下的 httpd.conf 文件,通过Ctrl+F查找到 LoadModule rewrite_module modules/mod_rewrite.so ,将前面的 ”#” 号删除即可
2)在linux环境下:
在编译 apache 的时候记得加上带 rewrite 模块。
2、让apache服务器支持.htaccess
在服务器或者虚拟主机的 <Directory> 配置段里,把你的 AllowOverride 配置设置成All,表示允许所有指令在 .htaccess 生效。
3、检查rewrite模块是否开启
当rewrite模块已经成功加载时,在phpinfo()里可以看到load的模块列表里有rewrite的名字。
更多rewrite知识访问技术牛人博客。
在项目根目录下新建.htaccess文件,建议用vscode去创建,这样少一点揪心的事。如下图:

参考官方文档,htaccess内容如下:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
更多htaccess内容参考大神的技术博客
重启服务器,这样就可以啦。
Vue 打包部署到服务器后,非主页刷新后出现404问题解决的更多相关文章
- vue 打包部署到服务器上 配置nginx访问
坑一 css,js资源引入不正确 webpack配置文件config/index.js 需要更改: 方法一 当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根 ...
- antdpro 打包部署后访问路由刷新后404
antdpro build 后访问路由刷新后 404? 解决方法有三种: 1. 改用 hashHistory,在 .umirc.js或者是config.js 里配 history: 'hash' 2. ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- vue项目打包部署到服务器,静态资源文件404
js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...
- django项目、vue项目部署云服务器
目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...
- Vue打包文件放在服务器,浏览器存在缓存问题的解决
在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
随机推荐
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- Linux 目录和文件的操作
整理常用的linux命令,关于目录和文件的操作,用于巩固记忆,以备不时之需. [root@localhost ~] root:当前用户 localhost:主机名 ~:当前所在位置 符号#:管理员 符 ...
- MySQL用户与权限
用户连接到mysql,并做各种查询,在用户和服务器中间分为两个阶段: 1:用户是否有权连接上来 2:用户是否有权执行此操作(如select,update等等) 先看第一个阶段:服务器如何判断用户是否有 ...
- Centos7源码部署apache/httpd服务
httpd:是一个提供网站服务的程序 监听端口:80 环境准备: Linux CentOS7.3系统 使用一台服务端,一台客户端即可: 一.安装httpd 1:安装 [root@localhost ~ ...
- nginx证书配一波
nginx下,拿到crt和key就可以开始干~ 同一个nginx,多个域名,没问题. server { listen 80; listen 443 ssl; server_name www.xxx.c ...
- 管理员权限运行-C#程序
C#程序以管理员权限运行 在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下也 ...
- 牛客1024B 石头游戏
题目描述 石头游戏在一个 \(n\) 行 \(m\) 列 \((1\leq n,m \leq 8)(1≤n,m≤8)\) 的网格上进行,每个格子对应一种操作序列,操作序列至多有10种,分别用0~9这1 ...
- 读取yaml文件小方法
def read_inf(inf_path): '''读取指定路径配置文件''' try: import yaml fr = open(inf_path) fy = yaml.load(fr) fr. ...
- Linux安装部署项目实例
本次安装jdk,mysql,maven,redis,nginx,tomcat 安装之前先升级系统 使用命令:/bin/yum - y update 1.安装jdk 先建立一个项目的目录-jiaoton ...
- 全球百大最有前景AI公司出炉,中国成独角兽最强诞生地
https://new.qq.com/omn/20190210/20190210B0BVK2.html 硅谷最强智库之一的 CB Insights 日前发布 AI 100 2019 报告,在这 100 ...