原因是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. CSipsimple最新版本编译

    CSipsimple最新版本编译 CSipsimple是依赖pjsip协议,官网http://code.google.com/p/csipsimple/,官网上也有已经编译好的apk,对于编译CSip ...

  2. 洛谷P1310 表达式的值 题解 栈/后缀表达式的应用

    题目链接:https://www.luogu.org/problem/P1310 本题涉及算法:栈.前缀表达式转后缀表达式,动态规划思想. 这道题目我思考了好长时间,第一时间让我做的话我也做不出来. ...

  3. Eclipse设置默认编码为UTF-8

    需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...

  4. JPA+Postgresql+Spring Data Page分页失败

    按照示例进行如下代码编写 Repository Page<DeviceEntity> findByTenantId(int tenantId, Pageable pageable); se ...

  5. ssh使用笔记

    在集群管理和配置中有很多命令要在各个节点中发送(特别是Master->Worker),大家都不希望发送每一个命令时都输入一次密码,因此常常先配置实现Master无密码登录到所有的Worker节点 ...

  6. Spring Security 5.x兼容多种密码加密方式

    1 spring security PasswordEncoder spring security 5不需要配置密码的加密方式,而是用户密码加前缀的方式表明加密方式,如: {MD5}88e2d8cd1 ...

  7. linux 让出处理器

    如我们已见到的, 忙等待强加了一个重负载给系统总体; 我们乐意找出一个更好的技术. 想到的第一个改变是明确地释放 CPU 当我们对其不感兴趣时. 这是通过调用调度函数而 实现地, 在 <linu ...

  8. js 实用技巧 短路求值

    &&运算符  如果操作有false  则返回false  例如 0&&1  // 返回0 true&&false  //返回false 0&&a ...

  9. There is already an open DataReader associated with this Connection which must be closed first EF

    废话不多说,直接 上图,及解决办法.不过问题还不是太清楚到底为什么会出现这个情况..........  

  10. 前端——css属性方法

    目录 标签快捷写法 宽和高 字体 1.文字字体 2.字体大小 3.字体粗细 4.字体颜色 5.字体对齐 6.文字下划线控制 7.文字首行缩进 8.字体英文换大写 背景属性 1.背景颜色 2.背景图片 ...