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？

Answer 1

刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。
一般是修改assetsPublicPath:'./'; //打包APP用‘./’，网页还是用用‘/’