vue-router在hash模式下打包部署后通过url访问报404

Question

希望实现的效果：
http://localhost/ (访问到系统首页)
http://localhost/share (直接访问到一个独立的单页面)
使用vue-router的vue-cli3的项目，使用HbuilderX开发，开发环境下已经实现我想要的效果。
下面是部分代码

router配置文件router.js
...引用部分省略..
//路由定义
const routes = [
    {
        path: '/share',
        name: 'share',
        component: share
    },  
    {
        path: '/web',
        name: 'web',
        component: iContainer,
        children: [..]
    },
    {
        path: '/mobile',
        name: 'mobile',
        component: mHome,
        children: [..]
    }
]
const router = new VueRouter({
    mode: 'hash',
    routes
})

export default router

根据url后缀决定是进入独立的share页面还是进入普通首页

app.vue
<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
...引用部分省略..
    export default {
        name: 'app',
        data: function() {
            return {
                pathName: window.document.location.pathname
            }
        },
        created() {
            if (this.pathName == "/share") {
                this.$router.push('/share')
            } else {
                /** 判断是否手机端，进入对应入口 **/
                if (this.$utils._isMobile()) {
                    this.$router.push('/mobile')
                } else {
                    this.$router.push('/web')
                }
            }
        }
        methods: {}
    }
</script>

打包后将dist文件夹内容拷贝到tomcat，使用tomcat启动，首页能够正常访问。但是只要使用share访问就会报404。请问是什么原因导致？为什么在开发环境下正常，但是打包后部署就404？该如何解决达到我想要的效果？
网上搜了一天了，查到的都是说history下直接输入url会404，为什么我hash模式下也是404？

自己后面又仔细想了下，发现是生成链接那里有问题。
首先按照猜想测试了下http://localhost/#/share,果然就能加载页面，所以就修改了生成链接部分的代码，让它在地址后面上下文前面加上#就解决问题了。应该是这样的话就能保证访问的页面是/这个我们的唯一入口。然后就能进入我们想要的路由了！

Answer 1

vue项目vue-router路由history模式打包后放在服务器上要在WEB-INF/web.xml文件中配置：

    <error-page>
        <location>/index.html</location>
        <error-code>404</error-code>
    </error-page>

同时项目中也要一个404页面：