u014019676
Icce___
采纳率36.4%
2019-12-13 17:27 阅读 1.4k

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

80

希望实现的效果:
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,果然就能加载页面,所以就修改了生成链接部分的代码,让它在地址后面上下文前面加上#就解决问题了。应该是这样的话就能保证访问的页面是/这个我们的唯一入口。然后就能进入我们想要的路由了!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • qq_37744644 qq_351734088 2019-12-13 17:33

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

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

    同时项目中也要一个404页面:
    图片说明

    点赞 评论 复制链接分享

相关推荐