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

希望实现的效果:
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?

1个回答

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐