极客观点
项目管理
HarmonyOS
问题描述
使用的vue+element开发的项目，打包之后在IE下顶部导航没有了，在其他浏览器有(顶部导航用的el-menu来实现的)
还有就是打包的项目在IE11下打开不能刷新，一刷新就显示不能访问此页面，在IE10下可以刷新但是会报错
问题出现的环境背景及自己尝试过哪些方法
我尝试过使用babel-polyfill来解决项目在IE下的兼容性，但是无效
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
app.vue
<template>
<div id="app" style="min-width: 1366px;overflow: hidden">
<web-header v-if="$route.meta.showHeader" ></web-header>
<div style="">
<router-view></router-view>
</div>
<web-footer v-if="$route.meta.showFooter"></web-footer>
</div>
</template>
<script>
import Vue from 'vue'
import WebHeader from "./components/webHeader.vue";
import WebFooter from './components/webFooter.vue'
export default {
components: {WebHeader,WebFooter},
name: 'App',
created(){
this.$http._request('get','/file/prefix',null,null,'获取资源前缀失败').then(data=>{
Vue.prototype.$sourcePrefix = this.isNetUrl(data)?data:`http://${data}`;
})
},
methods:{
isNetUrl(url){
return /[a-zA-z]+:\/\/[^\s]*/.test(url)
}
}
}
</script>
<style>
#app {
box-sizing: border-box;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
<style type="less" >
.el-scrollbar_wrap{
overflow-x: hidden;
}
</style>
webHeader.vue
<template>
<div class="header" style=" width: 100%;min-width: 1200px;height: 82px;">
<div class="hidden-lg-and-up row-flex-layout y-center" style="text-align: initial;height:80px;position:fixed;right:20px;z-index:2000" @click="openCollapseMenu">
<div style="width:20px;height:20px">
<img style="width:100%;max-height:100%;" width="100%" height="100%" :src="showCollapseMenu?require('../assets/img/icons/icon_guanbi@2x.png'):require('../assets/img/icons/icon_liebiao@2x.png')"/><!--../assets/img/icons/icon_guanbi@2x.png-->
</div>
</div>
<!--视口在1200px及以上时隐藏-->
<el-row type="flex" align="middle" style="min-height: 80px;background: rgba(255,255,255,1);width: 100%;position:fixed;z-index:1999" >
<el-col :span="7">
<img src="../assets/img/home/logo.png" style="width:100%;max-height:100%;vertical-align: center;color:rgba(153,153,153,1);" height="100%" width="100%" id="logo" />
</el-col>
<el-col :span="1">
</el-col>
<el-col :span="15" v-if="!$route.meta.isNavigation" style="height: 82px;" class="hidden-md-and-down"><!--视口在992px及以下时隐藏-->
<el-menu mode="horizontal"
style="background: white;padding: 0;margin: 0;width: auto;height: 80px;"
background-color="#ffffff"
:default-active="selectedItem"
@select="handleSelectNav"
:collapse-transition="false"
>
<div class="menu" v-for="(menuItem,itemIndex) in navList" :key="itemIndex">
<el-submenu class="submenu" v-if="menuItem.type==='subMenu'" :index="String(itemIndex)">
<template slot="title">
<div class="submenu"
:class="String(itemIndex)=== selectedNavIndex? 'is-active':''"
>{{menuItem.title}}</div>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(subMenuItem,subItemIndex) in menuItem.children"
:key="subItemIndex"
:index="itemIndex + '-' + subItemIndex"
style="padding:0;background:#fff;border:none!important;"
>
<div class="submenuChild" slot="title">{{subMenuItem.title}}</div>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item
v-else-if="menuItem.type==='menuItem'"
:index="String(itemIndex)"
:class="String(itemIndex)=== selectedNavIndex? 'is-active':''"
style="padding:0;"
>
<div class="menuItem" slot="title">{{menuItem.title}}</div>
</el-menu-item>
</div>
</el-menu>
</el-col>
<el-col :span="3" class="hidden-md-and-down"><!--视口在992px及以下时隐藏-->
<div style="vertical-align: center;display: flex;flex-direction: row-reverse;" @click="onLogin" v-if="!loginStatus">
<span style="vertical-align: center;font-size: 14px;margin-left: 5px;margin-right:25px;line-height: 40px;">登录/注册</span>
<img src="../assets/img/home/icon_dlzc.png" height="45" width="45"/>
</div>
<div style="vertical-align: center;display: flex;flex-direction: row-reverse;" v-if="loginStatus">
<el-dropdown @command="handleCommand" placement="bottom" style="margin-right:25px;">
<span class="el-dropdown-link" style="vertical-align: center;font-size: 14px;margin-left: 5px;line-height: 45px;display:block;">
<img src="../assets/img/home/icon_gw_tc.png" height="22" width="22" style="margin-left:12px;vertical-align: middle;"/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-tooltip class="item" effect="dark" content="点击进入个人中心" placement="bottom-end">
<img class="avatar" src="../assets/img/home/icon_dlzc.png" height="45" width="45" @click="gotoPersonCenter"/>
</el-tooltip>
</div>
</el-col>
</el-row>
<div class="hidden-lg-and-up verticle-nav" style="width:100%;position:fixed;top:80px;z-index:1999;background-color: white;font-size:16px;" :style="{display:showCollapseMenu?'block':'none'}">
<!--<div style="width:100%;height:80px;background-color: white;"></div>-->
<el-collapse v-model="activeNames" style="" accordion @click.native="handleSelectV_Nav($event)"><!--@change="handleChange"-->
<div v-for="(menuItem,menuIndex) in navList" :key="menuIndex">
<div class="nav-single-item" v-if="menuItem.children==undefined" :data-v-nav-item="String(menuIndex)">{{menuItem.name}}</div>
<el-collapse-item v-else :title="menuItem.name" :name="menuIndex" class="nav-collapse-item">
<div v-for="(child,subMenuIndex) in menuItem.children" :key="subMenuIndex" class="nav-collapse-sub-item" :data-v-nav-item="menuIndex+'-'+subMenuIndex">{{child.name}}</div>
</el-collapse-item>
</div>
<div @click="onLogin" style="padding:15px;cursor: pointer;" v-if="!loginStatus">登录</div><!--todo:登陆移至此处-->
<div style="vertical-align: center;display: flex;flex-direction: column;justify-content:center" v-if="loginStatus">
<div style="width:100%;padding:15px 0;cursor: pointer;border-bottom:1px solid #ebeef5" @click="gotoPersonCenter">
个人中心
</div>
<div style="width:100%;padding:15px 0;cursor: pointer;" @click="handleCommand('outLogin')" >
退出登录
</div>
</div>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
components: {},
name: "web-header",
data(){
return{
showCollapseMenu:true,
activeNames: ['1'],
// headerStyle: 'position: absolute;top:0;',
fontColor: ' color: #ffffff;',
isFixed: false,
selectedNavIndex:'',//被选中的菜单项父级索引值（0,1,2...）
selectedItem:'0',
isHome: true,
token:'',
NAV_DATA: [
{
type:'menuItem',
title:"首页",
path:'/',
},
{
type:'menuItem',
title:"科室导航",
path:'/DepartmentList',
},
{
type:'subMenu',
title:"就医服务",
path:'/doctorsManagement',
children:
[
{
title:"预约挂号",
path:'' /* /orderAppointment屏蔽点击 */
},
{
title:"报告查询",
path:''
}
]
},
{
type:'subMenu',
title:"就医指南",
path:'/',
children:
[
{
title:"院内导航",
path:'/hospitalNavigation'
},
{
title:"医院位置",
path:'/hospitalLocation'
},
{
title:"排班信息",
path:'' /* /Scheduling屏蔽点击 */
},
{
title:"就医须知",
path:'/hospitalGuide'
},
{
title:"常见问题",
path:'/FAQ',
},
{
title:"价格公示",
path:'/pricePublicity',
},
]
},
{
type:'menuItem',
title:"资讯中心",
path:'/InfoCenter',
},
{
type:'subMenu',
title:"人事招聘",
path:'/',
children: [
{
title:"招聘列表",
path:'/recruitment',
}
]
},
{
type:'subMenu',
title:"问题反馈",
path:'/QA',
children:
[
{
title:"院长信箱",
path:'/QA',
query:{type:'1'}
},
{
title:"投诉信箱",
path:'/QA',
query:{type:'2'}
},
{
title:"举报信箱",
path:'/QA',
query:{type:'3'}
},
{
title:"监督信箱",
path:'/QA',
query:{type:'4'}
}
,
{
title:"满意度调查",
path:'/QASatisfiedList',
query:{type:'5'}
}
]
},
]
}
},
computed: {
userName () {
let userName = sessionStorage.name;
return userName
},
loginStatus () {
this.token = sessionStorage.token;
let token = this.token;
if (token == '' || token == undefined) {
return false;
}else {
return true;
}
},
navList:function () {
return this.NAV_DATA
}
},
watch:{
'$route':{
handler:function (currentRoute) {
/*console.log(currentRoute)*/
let {path} = currentRoute;
let routeMatched = currentRoute.matched;
let isNestRoute = routeMatched.length>1;//如果是嵌套路由的，matched有超过1个的路由信息
if(isNestRoute){
path = routeMatched[0].path;
}
let activeMenu = this.getNavItemIndex(path);
this.selectedItem = activeMenu;
this.selectedNavIndex = activeMenu.split('-')[0]
},
immediate: true
}
},
methods:{
onLogin(){
// this.$router.push('/Login');
},
getNavItemIndex(path){
let activeMenu = '';
this.navList.forEach((item,index)=>{
if(item.type==='menuItem'){
if(path===item.path){
activeMenu = String(index)
}
}
else if(item.type==='subMenu'){
item.children.forEach((subItem,subIndex)=>{
if(path===subItem.path){
activeMenu = index + '-' + subIndex;
}
})
}
});
return activeMenu
},
// 点击事件
handleSelectNav(index,indexPath){
let selectedItem = {};
if(index.indexOf('-')>0){//有二级菜单
let fatherIndex = index.split('-')[0];
let sonIndex = index.split('-')[1];
selectedItem = this.navList[fatherIndex].children[sonIndex];
this.selectedNavIndex = fatherIndex;
}
else{
selectedItem = this.navList[index];
this.selectedNavIndex = index;
}
let {path,query} = selectedItem;
this.directToPath(path,query);
},
// 路由调整
directToPath(path,query){
if(query && Object.keys(query).length>0){
this.$router.push({path:path,query:query});
}
else{
this.$router.push(path);
}
},
openCollapseMenu(){
this.showCollapseMenu = !this.showCollapseMenu
},
handleSelectV_Nav(event){
let target = event.target;
let itemIndex = target.getAttribute('data-v-nav-item');
/*console.log(itemIndex);*/
if(!itemIndex) return false;
this.handleSelectNav(itemIndex);
this.showCollapseMenu = false;
},
// 退出登录
handleCommand (command) {
if(command === 'outLogin') {
sessionStorage.clear();
this.token = '';
this.$router.push('/')
}
this.openCollapseMenu();
},
gotoPersonCenter(){
this.$router.push("/personCenter");
this.openCollapseMenu()
}
}
}
</script>
<style lang="less">
.header{
.verticle-nav{
.el-collapse-item__header{
font-size:16px;
justify-content: center;
position:relative;
}
.el-collapse-item__arrow{
position:absolute;
right:0;
margin:initial;
}
}
}
</style>
<style scoped lang="scss" >
.header{
.verticle-nav{/*垂直导航栏*/
.nav-single-item{
box-sizing: border-box;
height:49px;
line-height:49px;
border-bottom: 1px solid #ebeef5;
cursor:pointer;
&:hover{
color:#fff;
background:linear-gradient(90deg,rgba(0,141,92,1),rgba(9,173,167,1),rgba(66,187,146,1));
/*background-color: rgb(204,204,204);*/
}
}
.nav-collapse-item{
text-align: initial;
cursor:pointer;
.nav-collapse-sub-item{
font-size:16px;
line-height:33px;
text-align: center;
cursor:pointer;
&:hover{
color:#fff;
background:linear-gradient(90deg,rgba(0,141,92,1),rgba(9,173,167,1),rgba(66,187,146,1));
/*background-color: rgb(204,204,204);*/
}
}
}
}
}
.avatar:hover {
cursor: pointer;
}
#logo:hover{
cursor: pointer;
}
.is-active {
border-bottom: 2px solid #09ada7;
color: #303133;
}
.menu {
float: left;
display: inline-block;
background: white;
min-width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
background: white;
color: #333333;
font-family:MicrosoftYaHei;
font-size: 16px;
}
.menuItem{
min-width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
background: white;
color: #333333;
font-family:MicrosoftYaHei;
font-size: 16px;
}
.menuItem:hover{
height: 80px;
font-family:MicrosoftYaHei;
line-height: 80px;
text-align: center;
background:linear-gradient(90deg,rgba(0,141,92,1),rgba(9,173,167,1),rgba(66,187,146,1));
color: #FFFFFF;
font-size: 16px;
}
.submenu{
color: #333333;
padding: 0;
margin: 0;
height: 80px;
width: 100px;
}
.submenu:hover {
color: #ffffff;
}
.el-menu-item-group > ul{
padding-top: 4px;
}
.submenuChild{
height: 36px!important;
width: 100px;
font-size: 14px;
color: rgba(51,51,51,1);
font-family:MicrosoftYaHei;
text-align: center;
background: white;
}
.submenuChild:hover{
height: 36px;
width: 100px;
font-size: 14px;
color: #20AD9E;
font-family:MicrosoftYaHei;
opacity: .84;
text-align: center;
background: white;
}
</style>
<style lang="scss">
.header{
.el-menu--horizontal{
>.el-menu-item{
height:auto;
}
}
.el-submenu__icon-arrow el-icon-arrow-down{
background: transparent;
top:0;
right: 0;
}
.el-icon-arrow-down:before{
content: none;
}
.el-submenu__title{
padding: 0;
min-width: 100px;
height: 80px!important;
line-height: 80px!important;
text-align: center;
background: white;
color: #333333!important;
font-family: MicrosoftYaHei;
font-size: 16px;
.el-submenu__icon-arrow::before{
content:''
}
}
.el-submenu__title:hover{
color:#fff!important;
background:linear-gradient(90deg,rgba(0,141,92,1),rgba(9,173,167,1),rgba(66,187,146,1));
}
.el-menu-item:hover{
opacity:0.84;
background: white;
}
.el-menu-item{
height:auto;
background: white;
}
.el-carousel__item{
overflow: hidden;
width: 100%;
}
.el-menu.el-menu--horizontal{
border-bottom: solid 0px;
}
}
.el-menu--horizontal{
.el-menu--popup {
padding: 0;
min-width:100px;
.el-menu-item{
height:auto;
}
.el-menu-item:hover{
opacity:0.84;
background: white;
}
}
}
.el-menu--horizontal .el-menu>li.el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
padding: 0;
}
.el-menu--popup-bottom-start {
margin-top: 5px;
}
</style>
html5
刷新就没有了是因为静态文件404找不到了， 需要在服务器配置跳转；vue官网有对应的服务器配置方案；
https://router.vuejs.org/zh/g...