vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

  如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

  当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

  不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

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

以下为nodejs的后台配置:

  本人当前项目结构为:

  

  其中server为打包之后创建的新文件:

// server.js

const http = require('http')
const fs = require('fs')
const httpPort = http.createServer((req, res) => {
if (req.url.startsWith('/static/css') || req.url.startsWith('/static/js')) {
fs.readFile('.' + req.url, (err, data) => {
res.end(data);
return;
})
}
fs.readFile('index.html', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
} res.writeHead(, {
'Content-Type': 'text/html; charset=utf-8'
}) res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})

在dist目录下,开启当前的node服务(node server.js),然后访问 localhost:8090 即可访问,然后在路由的任何页面刷新,都不会出现404,这样就完美解决了

vue路由history模式下打包node服务器配置的更多相关文章

  1. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  2. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  3. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  4. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  5. VUE路由history模式坑记--NGINX

    因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...

  6. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  7. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  8. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

  9. vue路由history模式刷新404问题解决方案

    更改router 的base // biz是二级目录,路由文件改成 const router = new VueRouter({ mode: 'history', // base: process.e ...

随机推荐

  1. Apex语言(八)类和对象

    1.类和对象 一切皆对象,是客观存在的万物,有标识.属性和行为.一个人,一台电脑,一辆轿车都是对象 类是创建对象的模板或蓝图,是对象的抽象,是对象的类型. 一个对象是一个类的一个实例,是一个类的变量. ...

  2. 与Java注释相关的一些知识

    * Html标签:        * <a> 可定义锚,主要有以下两种属性            * href(最重要):创建指向另外一个文档的链接(或超链接)            * ...

  3. 阿里云直播鉴权java代码示例

    段时间公司需要做直播服务,所以就研究了一下阿里云的直播,在直播里面,最重要的就是url的鉴权操作(验证推流或者拉流的有效性),在网上找了很多代码,都没有发现java的demo,所以就写篇播客记录一下, ...

  4. [转]理解和配置 Linux 下的 OOM Killer

    最近有位 VPS 客户抱怨 MySQL 无缘无故挂掉,还有位客户抱怨 VPS 经常死机,登陆到终端看了一下,都是常见的 Out of memory 问题.这通常是因为某时刻应用程序大量请求内存导致系统 ...

  5. Python——Numpy基础知识(一)

    一.Numpy的引入 1.标准的Python 中用列表(list)保存一组值,可以当作数组使用.但由于列表的元素可以是任何对象,因此列表中保存的是对象的指针.对于数值运算来说,这种结构显然比较浪费内存 ...

  6. 构造函数和初始化表、this指针与常函数、析构函数、拷贝构造与拷贝赋值(day05)

    十四 构造函数和初始化表 ... 初始化表 )语法形式 class 类名{ 类名(形参表):成员变量1(初值),...{} }; )必须要使用初始化表的场景 -->如果有类 类型的成员变量,而该 ...

  7. BZOJ 3514 GERALD07加强版 (LCT+主席树)

    题目大意:给定n个点m条边无向图,每次询问求当图中有编号为[L,R]的边时,整个图的联通块个数,强制在线 神题!(发现好久以前的题解没有写完诶) 我们要求图中联通块的个数,似乎不可搞啊. 联通块个数= ...

  8. mysql字符集和排序规则

    1.关于字符集和排序规则所为字符集,就是用来定义字符在数据库中的编码的集合.常见的字符集有:utf8(支持中文)和AccIS(不支持中文) 数据库中的排序规则用来定义字符在进行排序和比较的时候的一种规 ...

  9. 2.6、Flask扩展

    Flask 被设计为可扩展形式,故而没有提供一些重要的功能,例如数据库和用户认证,所以开发者可以自由选择最适合程序的包,或者按需求自行开发. 社区成员开发了大量不同用途的扩展,如果这还不能满足需求,你 ...

  10. Beautifulsoup提取特定丁香园帖子回复

    DataWhale-Task3(Beautifulsoup爬取丁香园) 简要分析 完整代码 结果图 参考资料 简要分析 任务3:爬取丁香园论坛特定帖子,包括帖子主题,帖子介绍,回贴内容(用户名,用户头 ...