原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: 'history',
routes: [...]
})

需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

解决方案

在项目目录下新建文件.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>

即可解决问题

Vue.js项目在apache服务器部署后,刷新404的问题的更多相关文章

  1. vue部署后刷新404问题

    为什么会404NotFound Internet Information Services (IIS) 第一步:安装 IIS UrlRewrite 第二步:配置重写URL规则 在你的网站根目录中创建一 ...

  2. Node.js前端程序通过Nginx部署后刷新出现404问题的解决办法

    方案一 (这种方式容易被第三方劫持) location / { root /data/nginx/html; index index.html index.htm; error_page 404 /i ...

  3. Vue.js项目的兼容性与部署配置

    一.处理兼容性问题的相关插件: 1> 解决移动端某些版本的浏览器,点击事件有3s延时触发的问题 · 安装 fastclick 依赖包:npm install fastclick --save-d ...

  4. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  5. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

  6. 如何将你的 Vue.js 项目部署在云开发静态托管之上

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...

  7. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  8. Vue.js项目的开发环境搭建与运行

    写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...

  9. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

随机推荐

  1. Laravel 修改默认日志文件名称和位置

    修改默认日志位置 我们平常的开发中可能一直把laravel的日志文件放在默认位置不会有什么影响,但如果我们的项目上线时是全量部署,每次部署都是git中最新的代码,那这个时候每次都会清空我们的日志,显示 ...

  2. Linux下yum安装Redis

    检验是否有yum源: [root@localhost ~]# yum install redis 显示没有软件包Redis,安装epel仓库(提供一些RHEL/CentOS默认不提供的软件包). [r ...

  3. Flex AIR应用的启动闪屏(必须)

    说明: 一款移动应用,它必须具有启动屏幕,这点可以从我们常见的手机应用观察知道(如,你启动一个QQ,开始大约10秒钟会停留在一个界面上,之后才跳转到登陆或者是主界面). 在air移动应用中,如果不添加 ...

  4. Python--day47--mysql分页性能相关方案

    提高分页性能: 分页的时候,如果是正常的数据全局扫描,分页越大的时候花费的时间越长. 这时候要提高效率的话就不能全局扫描,如下面的例子,扫描索引且从最大或最小页开始扫描.

  5. HDU 2674

    0 <= N<=10^9 看到这个数据范围知道常规方法肯定做不出来. 不过一想想既然是mod2009,是不是只要其中含有一个2009,那么其结果一定是0了呢 说了这里思路,就是看什么时候出 ...

  6. HTML DOM clearInterval() 方法

    定义和用法 clearInterval() 方法可取消由 setInterval() 设置的 timeout. clearInterval() 方法的参数必须是由 setInterval() 返回的 ...

  7. [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)

    源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...

  8. 【b804】双栈排序

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入 ...

  9. 【js】vue 2.5.1 源码学习 (十) $mount 挂载函数的实现

    大体思路(九) 本节内容: 1. $mount 挂载函数的实现. // 将Vue.prototype.$mount 缓存下来 ==>mountComponet(this,el) { // 组建挂 ...

  10. linux 禁止单个中断

    有时(但是很少!)一个驱动需要禁止一个特定中断线的中断递交. 内核提供了 3 个函数为 此目的, 所有都声明在 <asm/irq.h>. 这些函数是内核 API 的一部分, 因此我们描述它 ...