vue项目开发过程中遇到的问题

前言

从0 开始开发一个vue项目，旨在记录开发中遇到的问题

1.全局安装Element UI

 https://element.eleme.cn/#/zh-CN/component/quickstart

npm i element-ui -S

main.js中

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2.报错：

报错原因：

  由于vue对语法的限制过于严格，所以第一次编译运行项目时会报错（如截图）

解决方法：

在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则

2.beforeEach狗子，next('/login')跳转时，无限循环导致Maximum call stack size exceeded的问题

代码如下：

import router from './router'
import { getToken } from '@/util/auth'

router.beforeEach((to, from, next)=>{
    const hastoken = getToken('token')
 
    if(hastoken){
        if(to.path === '/login'){
           //token存在，并且要去的是登录页面 则重定向到首页（工作台）
           next({ path: '/index' })
        }else{
            //token存在，要去的是登录页面以外的--访问的是其他路由
            next()
        }
    }else{
        //没有token 跳转到登录页
        next('/login')
    }
})

这段代码，咋一看符合逻辑，没有问题，但是忽略了一点导致Maximum call stack size exceeded的报错（如上方报错截图，陷入了死循环，最后导致栈溢出。

后来发现是因为没有排除当前地址，就是/login地址，导致了循环调用

所以修改代码为：

import router from './router'
import { getToken } from '@/util/auth'

router.beforeEach((to, from, next)=>{
    const hastoken = getToken('token')
 
    if(hastoken){
        if(to.path === '/login'){
           //token存在，并且要去的是登录页面 则重定向到首页（工作台）
           next({ path: '/index' })
        }else{
            //token存在，要去的是登录页面以外的--访问的是其他路由
            next()
        }
    }else{
        //没有token 跳转到登录页
       if(to.path === '/login'){
           //排除登录页  避免死循环存在
           next();
       }else{
        next('/login')
       }
    }
})