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. Typeclassopedia

    https://wiki.haskell.org/wikiupload/8/85/TMR-Issue13.pdf By Brent Yorgey, byorgey@gmail.com Original ...

  2. 题解 P2605 【[ZJOI2010]基站选址】(From luoguBlog)

    线段树优化dp 数组f[i][j]表示在前i个村庄内,第j个基站建在i处的最小费用 根据交线牛逼法和王鹤松式可得方程 f[i][j]=min(f[k][j−1]+cost(k,i)) cost(k,i ...

  3. APICloud 获取缓存以及清除缓存(常用第三方方法)

    一.app中经常会有缓存的清除这个操作,具体如下 1.获取缓存大小 apiready = function() { api.getCacheSize(function(ret, err) { //si ...

  4. 07.网络编程-2.UDP

    1.udp介绍 UDP --- 用户数据报协议, 是一个无连接的简单的面向数据报的传输层协议. UDP不提供可靠性, 它只是把应用程序传给IP层的数据报发送出去, 但是并不能保证它们能到达目的地. 由 ...

  5. canvas实现圆框图片

    作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...

  6. 继续聊WPF——Expander控件(1)

    这个控件最实用的地方,就是做导航栏. <StackPanel Margin="20,20" Width="100" Height="460&qu ...

  7. 【ABCD组】Scrum meeting 2

    前言 第2次会议在6月14日由组长在教9 405召开. 主要对下一步的工作进行说明安排,时长90min. 主要内容 经会议讨论,由于一些对知识掌握的原因,决定放弃java语言实现系统,改用c#完成此系 ...

  8. C# 通过反射为一个对象赋值

    /// <summary>   /// 反射赋值   /// </summary>   public class ObjectReflection   {       publ ...

  9. 在centos6上面安装python3.4

    mkdir -p /work cd /work gwet https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tar.xz tar -axf Py ...

  10. 设置Jmeter默认中文页面

    下载安装好Jmeter后默认的是英文,对于我这种学渣来说简直就是受到了1000000点攻击. 所以,如何把英文界面换成中文呢? 方法一(从网上看到的) 启动Jmeter找到 options >c ...