Vue 404页面处理
问题原因:
刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径
解决方案:
第一步:后端配置
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
Native Node.js
const http = require("http")
const fs = require("fs")
const httpPort = 80
http.createServer((req, res) => {
fs.readFile("index.htm", "utf-8", (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
})
res.end(content)
})
}).listen(httpPort, () => {
console.log("Server listening on: http://localhost:%s", httpPort)
})
第二步:前端配置
const router = new VueRouter({
-------------------------------------------------------------------------------------------------
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
如:
// 404未找到
{
path: '*',
component: notFind,
meta: {
title: '404未找到',
},
},
Vue 404页面处理的更多相关文章
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- nignx部署Vue单页面刷新路由404问题解决
官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...
- 066——VUE中vue-router之rewrite模式下配置404页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- vue hash模式和404页面的配置
1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是 ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- thinkphp访问不存在的模块或者方法跳转到404页面
使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: 'TMPL_EXCEPTION_FILE' => './Application/Home/View/ ...
随机推荐
- 【word2vec】Distributed Representation——词向量
Distributed Representation 这种表示,它最早是 Hinton 于 1986 年提出的,可以克服 one-hot representation 的缺点. 其基本想法是: 通过训 ...
- idea Error:(1, 10) java: 需要class, interface或enum, 未结束的字符串文字,Error:(55, 136) java: 非法字符: \65533
1.未结束的字符串文字,Error:(55, 136) java: 非法字符: \65533 这些乱七吧八遭的错误如果很多的话 , 尝试 重新修改下生成目录 修改下语言等级 上述方法都不行 ,还报错 ...
- 分页用到的子查询sql语句
说明(2017-8-31 23:30:22): 1. 分页用到的子查询sql语句 select * from(select *,ROW_NUMBER() over(order by id)as num ...
- MAMP和WAMP搭建Web环境,数据库,数据分布可视化
MAMP和WAMP搭建Web环境,数据库,数据分布可视化 1. 数据库 用MAMP和WAMP搭建Web环境,数据分布可视化 Web环境Web服务器:Apache.Nginx,处理Web请求数据库:My ...
- Linux nginx目录设置
上一节记录了nginx的安装,这里来试着修改下配置文件. #user nobody; worker_processes 1; #error_log logs/error.log; #error_log ...
- [转]Handsontable对单元格的操作
原文地址:http://blog.csdn.net/mafan121/article/details/46119905 1.自动填充单元格数据 fillHandle:true/false //当 ...
- 【转】oracle中的游标的原理和使用详解
游标 游标的简介: 逐行处理查询结果,以编程的方式访问数据 游标的类型: 1,隐式游标:在 PL/SQL 程序中执行DML SQL 语句时自动创建隐式游标,名字固定叫sql. 2,显式游标:显式游标用 ...
- 在分布式系统里看CAP定理
本文转自:http://zhuanlan.51cto.com/art/201703/534587.htm 计算机界有很多高大上又难于理解的术语,CAP就是其中之一, 什么一致性(Consistency ...
- spark1.6内存管理
Spark从1.6.0版本开始,内存管理模块就发生了改变,旧版本的内存管理模块是实现了StaticMemoryManager 类,现在被称为"legacy"."Leg ...
- MySQL日志——二进制日志
Mac怎么这么坑呢,搞了2小时了.唉 先来一个简单的,挖好坑,明天解决. 终端进入mysql: mysql> set global general_log=on; 然后进行数据库的任意操作: 查 ...