Vue项目初期报错问题记录大全

Vue项目初期报错问题记录大全

1、vs终端无报错，浏览器加载空白，发现Cannot read properties of null (reading ‘nextSibling’)

PS：下午创建完项目的时候可以成功显示页面，但是晚上测试了一下iconfont图标后就开始报错，将新代码注释掉也依旧报错
解决办法如下： 还未解决呜呜呜

解决办法

原本main.js中的代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
 
 
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");

修改为

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
 
const app = createApp(App)
app.use(store),
    app.use(router),
    app.use(ElementPlus),
    app.mount('#app')`

哈！什么神奇的原理！希望明早起来不会又报错！

2.vs终端报错 Component name “Index” should always be multi-word

解决办法

在vue.config.js文件中源代码为

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
});

修改为

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint校验
  lintOnSave: false,
});

3、element 导航菜单导入显示不完整

缺少导航一的下拉框

正确显示应为

解决办法

系统使用的是vue3版本，因此也应使用element3即element plus版本
PS：从网站官网进入可以进行版本跳转！

4、创建远程仓库失败

报错信息

解决办法

在git bash 运行命令：

git config --global --add safe.directory+文件完整路径

Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach’)

解决办法

路由配置文件中的属性写错了，本人写的是routers,但是正确写法应如下：

项目页面报错 ResizeObserver loop limit exceeded at eval

可忽略的报错但是项目体验非常不好

后来找到的解决办法 在APP.vue文件中添加如下代码：

 const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}