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

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

我用的是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. 神奇的外部嵌套(使用ROW_NUMBER()查询带条件的时候提示列名无效)

    declare @pageIndex int -- 第几页 declare @pageSize int -- 每页包含的记录数 --这里注意一下,不能直接把变量放在这里,要用select select ...

  2. js 将数字转换成中文大写

    //完成将 toChineseNum, 可以将数字转换成中文大写的表示,处理到万级别,例如 toChineseNum(12345),返回 一万二千三百四十五. const toChinesNum = ...

  3. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  4. Jmeter学习笔记(二十)——后置处理器XPath Extractor使用

    一.背景 在使用过程某些操作步骤与其相邻步骤存在一定的依赖关系,需要需要将上一个请求的响应结果作为下一个请求的参数. Jmeter中后置处理器正则表达式提取器和XPath Extractor都可以将页 ...

  5. js 高阶函数之柯里化

    博客地址:https://ainyi.com/74 定义 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且 ...

  6. JavaScript: 详解正则表达式之二

    在上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧. 正则修饰符又称为正则标记(flags),它会对正则的匹配规则做限定,进而影响匹配的最终结果.在上次的 ...

  7. manjaro跳坑记

    why manjaro 有两个原因: 我的电脑上win10+ubuntu16.04,ubuntu上跑一个程序会crash导致重启,不知道如何排查,想换个系统试试.(别人机器上同样G++版本不会cras ...

  8. 19.centos7基础学习与积累-005-命令总结01

    从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 1.查看命令帮助的方法: --help 适用于一般命令,非内置命令 man  适用于 ...

  9. Hadoop跨集群迁移数据(整理版)

    1. 什么是DistCp DistCp(分布式拷贝)是用于大规模集群内部和集群之间拷贝的工具.它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成.它把文件和目录的列表作为map任务的 ...

  10. django-安装nginx及fastdfs-nginx-module

    安装nginx及fastdfs-nginx-module 1. 解压缩 nginx-1.8.1.tar.gz 2. 解压缩 fastdfs-nginx-module-master.zip 3. 进入n ...