express配置spa-history模式

发布时间:2017-09-08

首先讲一下什么是history模式,路由默认是hash默认,

比如hash模式在路由会这么匹配

http://www.xx.com/#/user

history模式的路由会这么匹配,两者的区别就是history会使URL更美观

http://www.xx.com/user

Apache和Nginx配置比较简单,直接拿官方的例子过来

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 / {
# root 是你的程序根目录
  root /home/www/html
# /index.html  是从网站根目录开始找, 而不是绝对路径
  try_files $uri $uri/ /index.html;
}

这里为什么要讲Node.js配置history模式呢,因为踩到了坑,所以分享一下经验。

首先安装connect-history-api-fallback,咋们利用这个中间件实现history

cnpm install connect-history-api-fallback --save
var express = require('express')
var app = express();
var history = require('connect-history-api-fallback');
app.use(history())      // 这里千万要注意,要在static静态资源上面

app.use(express.static('public'));

app.listen(3000)

把index.html 放置 public目录下即可。

第二个问题是,服务器不会在返回404页面, 所有路由都返回index.html,所以需要写一个404.vue组件呈现给用户。404这里不讲述,主要讲Vue.js如何匹配404.

//  只要在所有路由后面添加即可,
{      // 即匹配不成功的页面返回404页面
            name: 'error-404',
            path: '*',
            component: resolve => require(['../components/error/404.vue'], resolve),
        },

第三个问题,如果网站有2个程序,需要重写url,

就像这样,from可以用正则也可以用字符串,匹配/xiejiahe/ 这里也挺坑爹的,如果正则这样写/\/xiejiahe/是不行的 /xiejiahe/ 是匹配不了的,所以后面的斜线需要匹配任意个。 to参数是相对路径, 在public下。

app.use(history({
    rewrites: [
        {
            from: /\/xiejiahe\/{0,}$/,
            to: '/xiejiahe/index.html'
        }
    ]
}));
JavaScriptVue.jsNode.jsReact
广告