Vue错误汇总二

1.vuex的modules中commit is not defined

主store内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import Vue from 'vue';
import Vuex from 'vuex';

/** 引入模块 */
import Simulation from "@pages/simulation/store";

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    simulation:Simulation
  },
  state: {},
  mutations: {},
  getters:{},
  actions: {}
})

simulation.js文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import Vue from 'vue'
import animation from './animation'
import compose from './compose'
import contextmenu from './contextmenu'
import copy from './copy'
import event from './event'
import layer from './layer'
import snapshot from './snapshot'
import lock from './lock'

const data = {
    namespaced:true,//注意 模块化管理数据请不要忘了命名空间的开启
    state: {
    },
    mutations: {
        compose({ componentData, areaData, editor }) {
            console.log(commit); // 输出commit为undifine
            console.log(this.commit); // 正确的使用方法
        }
    },
}

export default data

模块的使用：store.state.simulation ，获取到模块中的state。

2.键盘事件@keyUp不起作用

这个问题很奇怪，就是说，这个keyup事件，有时候能起作用，但是有时候不会起作用。

1

<div class="shape" @keyup="handleKeyUp"></div>

【解决方案】
也就是说，在div上单纯的监听键盘事件是不行的，需要使用 window 或者是 document 进行键盘事件的监听

3.Uncaught (in promise) NavigationDuplicated:Avoided redundant

这个问题，是由于路由重复导致的，多数的解决方案就是添加

1
2
3
4
5
6
7
8
9

import Vue from 'vue'
import Router from 'vue-router'

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const includPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return includPush.call(this, location).catch(err => err)
}
Vue.use(Router);

【解决方法】
为路由增加回调函数，捕获错误。

1
2
3

this.$router.replace({
  query: { type: tab },
}).catch(err => {err});

4.not found:regenerator-runtime/runtime.js

这个问题挺奇怪的，就是我同一份的package.json，在windows上没有问题，但是在Deepin上 npm run 就会出现问题。

1
2
3

npm i regenerator-runtime
## 或者
pnpm add regenerator-runtime -D

5.To install it, you can run: npm install –save !xml-loader!../../src/svg

这是别人写的程序用到了vue-svg-icon这个插件，我安装的时候，总是报上面的错误。很多的文章可能出自同一个人之手，就是说再src目录下新建一个svg目录，图表放在里面，就可以解决问题了，但是很遗憾，我明明就有这个目录的，还是不行的。

1
2
3
4
5
6

// 这个方法并不行
import Icon from "vue-svg-icon/Icon.vue";
// 这一句好像要放在Vue.use和Vue.config.productionTip上面
Vue.component("icon", Icon);
Vue.use(ElementUI);
Vue.config.productionTip = false;

【解决方法】
打开vue-svg-icon的源码路径：node_modules\vue-svg-icon\Icon.vue，找到地77行，然后将下面的src/svg路径修改一下就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13

icon() {
  // 找到这个代码，注释原先的代码
  // let xml = require(`!xml-loader!../../src/svg/${this.name}.svg`);
  // 修改为下面的代码
  let xml = require(`!xml-loader!/src/svg/${this.name}.svg`);
  const t = xml.svg.$.viewBox.split(' ');
  console.info(`src/svg/${this.name}.svg has been loaded`);
  return {
    width: t[2],
    height: t[3],
    paths: convert.SVGtoArray(xml.svg)
  }
},

6.echarts切换页面不显示问题

这个问题比较特别(好像我遇到的全部的问题都非常的特别)，就是我在页面中创建了一个折线图，在本地测试的时候，没有问题，但是部署到服务器上之后，切换页面的时候，就出现问题了，图表出不来了。

【解决方法】
解决方法就是在切换页面的时候，清空echart图表,这样就不会有问题了。

1
2
3
4
5
6

onBeforeUnmount(()=>{
  if(chartInstance){
    chartInstance.dispose();
    chartInstance = null;
  }
})

7.cannot reference locally declared variables because it will be hoisted outside of the setup() function.

这个问题就是我在 withDefaults 函数外部定义了变量 baseUrl,然后在 withDefaults 中引入了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script setup lang="ts">
const baseUrl = import.meta.env.BASE_URL

const props = withDefaults(
  defineProps<{
    url?: string
    mapKey?: string
    options?: any
  }>(),
  {
    url: baseUrl + "config/config.json",
    mapKey: "default",
    options: () => ({})
  }
)
</script>

【解决】
修改为下面的东西就好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    url?: string
    mapKey?: string
    options?: any
  }>(),
  {
    url: import.meta.env.BASE_URL + "config/config.json",
    mapKey: "default",
    options: () => ({})
  }
)
</script>

8.Uncaught (in promise) SyntaxError: Unexpected token ‘<’, “<!DOCTYPE “… is not valid JSON

本地开发没有问题，但是通过 pnpm build 打包之后，就出现了这么一个莫名其妙的问题。

这个问题算是悬而未决的，幸好项目不是很大，我只能重新进行项目搭建了。

后来经过重新搭建项目，我终于找到了问题的原因,这个代价还是蛮大的。问题主要就出现在了上面的那个问题的这个url配置上面，url:import.meta.env.BASE_URL + “config/config.json”, 我本意是使用环境变量中的内容进行替换，我在环境变量 .env.production 文件中写入了一个变量：VITE_BASE_URL=”/dxs/“，我本意是引用这个变量的，结果写成了 import.meta.env.BASE_URL + “config/config.json”，那么自然而然的就是请求了错误的json文件，结果导致了问题出现。

【解决方法】
解决方法就是将 import.meta.env.BASE_URL 替换为 import.meta.env.VITE_BASE_URL，默认的 import.meta.env.BASE_URL 就是项目名称，不加后面的斜杠的，.env.production 文件中的变量改为：VITE_BASE_URL=”/dxs”

1
2
3
4
5
6
7
8
9
10
11
12

const props = withDefaults(
  defineProps<{
    url: string
    mapKey?: string
    options?: any
  }>(),
  {
    url: import.meta.env.VITE_BASE_URL + "/config/config.json",
    mapKey: "default",
    options: () => ({})
  }
)

9.Failed to load plugin ‘n’ declared in ‘.eslintrc.js

Vue3打包的时候，在macos上没有问题，但是到了windows系统上，运行 pnpm build 的时候就出现了问题。

【解决方案】
重新安装 eslint-plugin-n 插件。

1

pnpm add eslint-plugin-n -D

10.Failed to parse source for import analysis because the content contains invalid JS syntax

【解决方案】
就是部分的语法写错了，没有括号闭合之类的错误。