svelte history路由刷新后404

npms.io上搜索到svelte的route包其实也不算少，使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便，试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。

使用简单
功能丰富
支持history和hash 我也是够难伺候的。

在试用了多个支持history的路由过程中，都遇到了一个问题：切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404，而svelte却在开发过程中也出现了，又想放弃了... 好在我也是试用过五六七八个路由的人了，中间不知道尝试过多少种方法来实现history路由。最后使用@spaceavocado/svelte-router包实现了history路由的时候我还是满心欢喜。

使用方法：

//App.svelte
<script>
	import RouterView from '@spaceavocado/svelte-router/component/view';
	import { routes } from './router.js'
</script>

<RouterView />

//router.js
import createRouter from '@spaceavocado/svelte-router';
import index from './index/index.svelte';
import a from './a/a.svelte';
import b from './b/b.svelte';

export const routes = createRouter({
    mode: "HISTORY",
    routes: [
        {
            path: '/',
            name: 'HOME',
            component: index,
        },
        {
            path: '/a',
            name: 'a',
            component: a,
        },
        {
            path: '/b',
            name: 'b',
            component: b,
        },
        {
            path: '*',
            component: index,
        },
    ],
});

// index.svelte
<script>
	import RouterLink from '@spaceavocado/svelte-router/component/link';
</script>

<main>
	<h1>Hello {name}!</h1>
	<RouterLink to="/a">a页面</RouterLink>
	<RouterLink to="/b">b页面</RouterLink>
</main>

可是一刷新就嗝屁了，依旧出现404.无意中就试了一下之前使用其他路由包使用的一种rollup配置方法。 package.json中的start命令： sirv public -s加了-s参数就好了。

sirv-cli是一个提供静态文件服务命令行工具。

 $ sirv --help

  Description
    Run a static file server

  Usage
    $ sirv [dir] [options]

  Options
    -D, --dev          Enable "dev" mode
    -e, --etag         Enable "ETag" header
    -d, --dotfiles     Enable dotfile asset requests
    -c, --cors         Enable "CORS" headers to allow any origin requestor
    -G, --gzip         Send precompiled "*.gz" files when "gzip" is supported  (default true)
    -B, --brotli       Send precompiled "*.br" files when "brotli" is supported  (default true)
    -m, --maxage       Enable "Cache-Control" header & define its "max-age" value (sec)
    -i, --immutable    Enable the "immutable" directive for "Cache-Control" header
    -k, --http2        Enable the HTTP/2 protocol. Requires Node.js 8.4.0+
    -C, --cert         Path to certificate file for HTTP/2 server
    -K, --key          Path to certificate key for HTTP/2 server
    -P, --pass         Passphrase to decrypt a certificate key
    -s, --single       Serve as single-page application with "index.html" fallback
    -I, --ignores      Any URL pattern(s) to ignore "index.html" assumptions
    -q, --quiet        Disable logging to terminal
    -H, --host         Hostname to bind  (default localhost)
    -p, --port         Port to bind  (default 5000)
    -v, --version      Displays current version
    -h, --help         Displays this message

  Examples
    $ sirv build --cors --port 8080
    $ sirv public --quiet --etag --maxage 31536000 --immutable
    $ sirv public --http2 --key priv.pem --cert cert.pem
    $ sirv public -qeim 31536000
    $ sirv --port 8080 --etag
    $ sirv --host --dev

功能还是蛮丰富的，其中-s参数是专门用户单页应用的。

总结：不怕困难多，只要肯折腾！

原文：www.yuedun.wang/blogdetail/…