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

被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以下是我自己跳坑的方法:

我用的是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问题解决的更多相关文章

  1. vue 打包部署到服务器上 配置nginx访问

    坑一 css,js资源引入不正确 webpack配置文件config/index.js 需要更改: 方法一 当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根 ...

  2. antdpro 打包部署后访问路由刷新后404

    antdpro build 后访问路由刷新后 404? 解决方法有三种: 1. 改用 hashHistory,在 .umirc.js或者是config.js 里配 history: 'hash' 2. ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  5. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  6. django项目、vue项目部署云服务器

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...

  7. Vue打包文件放在服务器,浏览器存在缓存问题的解决

    在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta ...

  8. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  9. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

随机推荐

  1. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  2. Linux 目录和文件的操作

    整理常用的linux命令,关于目录和文件的操作,用于巩固记忆,以备不时之需. [root@localhost ~] root:当前用户 localhost:主机名 ~:当前所在位置 符号#:管理员 符 ...

  3. MySQL用户与权限

    用户连接到mysql,并做各种查询,在用户和服务器中间分为两个阶段: 1:用户是否有权连接上来 2:用户是否有权执行此操作(如select,update等等) 先看第一个阶段:服务器如何判断用户是否有 ...

  4. Centos7源码部署apache/httpd服务

    httpd:是一个提供网站服务的程序 监听端口:80 环境准备: Linux CentOS7.3系统 使用一台服务端,一台客户端即可: 一.安装httpd 1:安装 [root@localhost ~ ...

  5. nginx证书配一波

    nginx下,拿到crt和key就可以开始干~ 同一个nginx,多个域名,没问题. server { listen 80; listen 443 ssl; server_name www.xxx.c ...

  6. 管理员权限运行-C#程序

    C#程序以管理员权限运行 在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下也 ...

  7. 牛客1024B 石头游戏

    题目描述 石头游戏在一个 \(n\) 行 \(m\) 列 \((1\leq n,m \leq 8)(1≤n,m≤8)\) 的网格上进行,每个格子对应一种操作序列,操作序列至多有10种,分别用0~9这1 ...

  8. 读取yaml文件小方法

    def read_inf(inf_path): '''读取指定路径配置文件''' try: import yaml fr = open(inf_path) fy = yaml.load(fr) fr. ...

  9. Linux安装部署项目实例

    本次安装jdk,mysql,maven,redis,nginx,tomcat 安装之前先升级系统 使用命令:/bin/yum - y update 1.安装jdk 先建立一个项目的目录-jiaoton ...

  10. 全球百大最有前景AI公司出炉,中国成独角兽最强诞生地

    https://new.qq.com/omn/20190210/20190210B0BVK2.html 硅谷最强智库之一的 CB Insights 日前发布 AI 100 2019 报告,在这 100 ...