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 ...
随机推荐
- Flexbox布局入门笔记
1.display:flex 设定为Flexbox布局容器. 2.flex-direction: row表示在水平方向展开可伸缩项:column表示在垂直方向展开可伸缩项:总之就是定义主轴(侧轴方向) ...
- 单词eschaunge交易所eschaunge交换
Exchange of one person or thing for another; reciprocal giving and receiving: (a) of prisoners of wa ...
- POSIX 使用互斥量和条件变量实现生产者/消费者问题
boost的mutex,condition_variable非常好用.但是在Linux上,boost实际上做的是对pthread_mutex_t 和pthread_cond_t的一系列的封装.因此通过 ...
- npm 安装、卸载 模块或包的命令(转载)
npm安装卸载命令 来源:https://www.jianshu.com/p/e6ee00ea03cd npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目 ...
- linux tomcat 启动后控制台未显示启动日志
在linux 服务器启动的时候未出现启动日志,这个时候,如果执行startup.sh会出现控制台没有打印任何消息的问题 应该执行: ./catalina.sh run
- ajax请求处理概要
/** *不关心参数传递与参数返回的形式. */ url = ctxPath + '/ccb/xxx '; $.get(url); $.post(url); /** * 常见形式. */ var ur ...
- java Excel文件流输出(后台)没有下载提示
/**方案: *1. *问题源头应该是前端用的是ajax方式请求路径,要想出现下载Excel的弹窗,我个人理解应该是等同于重新打开一个窗口,而ajax默认不动页面直接将值返回,所以没有提升下载. *解 ...
- 功能更新 | medini analyze — 符合ISO 26262的功能安全平台工具
汽车电子电气系统的功能安全随着智能驾驶.新能源等新兴技术的发展而愈发受到重视.在国际功能安全标准ISO 26262的落地过程中遇到了很多的棘手问题:如何正确而有效地实施HARA以得到合 ...
- 《CoderXiaoban》第八次团队作业:Alpha冲刺
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与ALPHA冲刺 团队名称 Coderxiaoban团队 作业学习目标 (1)掌握软件测试基 ...
- 关于input标签checkbox属性 和checked
我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...