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. 【剑指Offer】61、序列化二叉树

      题目描述:   请实现两个函数,分别用来序列化和反序列化二叉树.   解题思路:   序列化是指将结构化的对象转化为字节流以便在网络上传输或写到磁盘进行永久存储的过程.反序列化是指将字节流转回结构 ...

  2. 洛谷P1192 台阶问题【dp递归】

    有NN级的台阶,你一开始在底部,每次可以向上迈最多KK级台阶(最少11级),问到达第NN级台阶有多少种不同方式. 输入输出格式 输入格式: 两个正整数N,K. 输出格式: 一个正整数,为不同方式数,由 ...

  3. 51nod1185 威佐夫游戏 V2【博弈论】

    有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...

  4. NumPy常见的元素操作函数

    ceil(): 向上最接近的整数,参数是 number 或 array floor(): 向下最接近的整数,参数是 number 或 array rint(): 四舍五入,参数是 number 或 a ...

  5. POJ 1694 An Old Stone Game

    题目: Description There is an old stone game, played on an arbitrary general tree T. The goal is to pu ...

  6. Syncfusion在WinPhone8.1实现统计图

    using Syncfusion.UI.Xaml.Charts; public static SfChart InitCompareChart(string fundName, double tenT ...

  7. 【ACM】hdu_zs1_1004_第二小整数_201307271529

    第二小整数 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submissi ...

  8. 关于Hanoi算法

    java经典算法——河内算法(Hanoi) 有三根相邻的柱子,标号为A,B,C,A柱子上从下到上按金字塔状叠放着n个不同大小的圆盘,要把所有盘子一个一个移动到柱子B上,并且每次移动同一根柱子上都不能出 ...

  9. Django(七)

    一.ModelForm操作及验证 1.class Meta:class Meta: #注意以下字段不能加逗号 model = models.UserInfo #这里的all代指所用的字段,也可以是一个 ...

  10. HDU 2295

    二分答案+重复覆盖.注意返回的条件哦,不能光套模板. #include <iostream> #include <cstdio> #include <cstring> ...