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