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/ ...
随机推荐
- redis过期回调以及键空间通知
背景 最近需要涉及一个定时通知的业务,之前的办法是采用定时任务,每秒查询一次.后来了解到Redis的键空间通知机制,其中的过期通知,和业务非常贴合. 键空间通知 下面是Redis中文文档的介绍 键空间 ...
- [转]Ext.grid常用属性和方法
原文地址:http://blog.csdn.net/fm19901229/article/details/8113969 1.Ext.grid.GridPanel 主要配置项: store:表格的 ...
- 【微信小程序】使用setTimeout制作定时器的思路
setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // ...
- C语言 · 成绩查询系统
抱歉,昨天忘了往博客上更新,今天补上. 成绩查询系统 分值: 21 数学老师小y 想写一个成绩查询系统,包含如下指令: insert [name] [score],向系统中插入一条信息,表示名字为na ...
- PropertyChangeSupport
1 import java.beans.PropertyChangeListener; import java.beans.PropertyChangeSupport; /** * @author h ...
- SparkSQL---实战应用
SparkSQL---实战应用 数据集 :http://grouplens.org/datasets/movielens/ MovieLens 1M Datase 相关数据文件 : users.dat ...
- hbase 学习(十五)缓存机制以及可以利用SSD作为存储的BucketCache
下面介绍Hbase的缓存机制: a.HBase在读取时,会以Block为单位进行cache,用来提升读的性能 b.Block可以分类为DataBlock(默认大小64K,存储KV).BloomBloc ...
- Shell数组遍历
#!/bin/bash emp_info=( aaa aaa@qq.com bbb bbb@qq.com ccc ccc@qq.com ddd ddd@qq.com eee eee@qq.com ) ...
- 【linux】——Ubuntu 12.04中文输入法的安装
Ubuntu 12.04中文输入法的安装 Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...
- 修改Windows和linux系统时间
1.修改本机Windows的系统时间,Java代码实现: import java.io.IOException; import java.text.SimpleDateFormat; import j ...