❤ vue3 项目使用报错

vue3语法变动

TypeError: Assignment to constant variable （常量变量）

背景：
Vue3 项目使用
TypeError: Assignment to constant variable.

原因：

因为我对const定义的常量重新赋值了

解决方法：

换成 var 声明

[Vue warn]: Property “index” was accessed during render but is not defined on instance. （v-if 与 v-for）

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

（setup语法糖）Property “selectedItemIndex“ was accessed during render but is not defined on instance. 报错解决

使用

请确保按照以下步骤检查和修复此问题：

在<script setup>部分使用ref函数来定义响应式变量，并通过解构赋值从返回的引用对象中获取变量

<script setup>
import { ref } from 'vue';
 
const selectedItemIndex = ref(-1); // 使用ref定义响应式变量
const items = [/* your item data */]; // 你的选项数据
 
// ...其它代码
</script>

2、确保在模板中正确访问响应式变量。在模板中，使用.value来访问ref包装的响应式变量。

<template>
  <ul>
    <li
      v-for="(item, index) in items"
      :key="index"
      :class="{ active: index === selectedItemIndex.value }" <!-- 使用 .value 访问变量 -->
      @click="selectItem(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>

3、检查selectItem函数是否在正确的位置，并确保它能够访问到selectedItemIndex变量。

<script setup>
// 先导入需要的模块和函数
 
// 确保 `selectedItemIndex` 变量在这之前定义
const selectedItemIndex = ref(-1);
const items = [/* your item data */];
 
// 定义 `selectItem` 函数并确保它能够访问到 `selectedItemIndex` 变量
const selectItem = (index) => {
  selectedItemIndex.value = index;
};
</script>

通过检查上述步骤，您可以解决警告消息“Property ‘selectedItemIndex’ was accessed during render but is not defined on instance.”。确保正确定义和访问响应式变量，并将其绑定到模板中以供渲染使用。

（setup语法糖） Uncaught SyntaxError: Cannot use import statement outside a module

1.问题描述
在使用html直接写 vue3 里面的语法糖setup 时候遇到 ：

Uncaught SyntaxError: Cannot use import statement outside a module

直接在浏览器中打开该html文件，发现报错了：Uncaught SyntaxError: Cannot use import statement outside a module
报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type=“text/javascript”，需要改为type=“module”

————————————————

（vue3新特性类型错误-Vue3）Assignment to constant variable.

一个关于常变量的报错：赋值给常变量
检查代码是否有给定义为const的变量进行赋值。
const ：常量，不能修改它的值，且定义的常量必须赋初值；
let：变量，可以进行变量赋值操作，且不需要赋初值。

实际场景vue3
vue3 赋值reactive数据Assignment to constant variable.

情景：
在vue3之中使用reactive定义的对象，当我们试图整个更改这个对象时候，会告诉我们报错，但是单独更改这个对象的属性时正确；

原因：

在 Vue 3 中使用 reactive 函数创建的响应式数据是常量（immutable），这意味着一旦你为响应式对象分配了一个值，你就不能再重新分配给这个对象。如果你尝试这样做，你会遇到 “Assignment to constant variable” 的错误，因为 JavaScript 认为你试图改变一个常量变量的值。

正确用法：
应该直接修改响应式对象的属性而不是重新赋值整个对象，vue3之中使用toRefs转化一下

 import { ref, reactive ,toRefs } from 'vue'  
 const formvalue = reactive({
    name: '',
    age: '',
    sex: 1,
    type: [],
})
let form=toRefs(formvalue);


// 修改按钮点击
function handleEdit(row) {
  console.log(row,'修改');
  form=row;
  // form.age=18;
  centerDialogVisible.value = true;
}

语言TS报错

File ‘D:/LTB/code/Lintaibai/src/views/admin/index - 副本.vue.js’ is a JavaScript file. Did you mean to enable the ‘allowJs’ option?
The file is in the program because:
Root file specified for compilation

Found 1 error.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

缺失了lang=“ts” 导致的报错

打包报错

（配置项错误）File ‘xxx‘ is a JavaScript file. Did you mean to enable the ‘allowJs‘ option

查了一下说是由于我们的项目配置中缺少了‘allowJs’选项导致的。当我们在使用TypeScript编辑器编译项目时，如果项目中存在javaScript文件，但是没有启用’allowJs’选项，就会有上面的错误信息。

什么是“allowJs”选项：

在项目中如果同时使用javaScript和TypeScript。由于javaScript和TypeScript有语法和功能上的差异，我们需要告诉TypeScript编译器如何处理javaScript文件。TypeScript提供了“allowJs”选项。该选项用于指示TypeScript编译器是否允许编译javaScript文件。

解决：

1、在项目的tsconfig.json文件中

2、找到“compilerOptions”部分

3、在“compilerOptions”中添加“allowJs”选项，并设置为true

{
  "compilerOptions": {
    "allowJs": true,
    }
}

（配置项）Could not find a declaration file for module

tsconfig.json

"noImplicitAny": false,

（配置项）Cannot find module ‘vue-router’ or its corresponding type declarations.

这个错误表示你的项目中找不到 ‘vue-router’ 模块或其相应的类型声明

在这里插入代码片

错误翻译

Cannot find module ‘@/store/index’ or its corresponding type declarations.

找不到xxx模块或者声明文件

An import declaration can only be used at the top level of a namespace or module.

导入声明的文件只能在顶部使用

解决办法：

把import xxx from 'xxx’全部放在顶部（script后）

报错前：

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
import useStore from '@/store/index'
const storeUser = useStore()
</script>

处理后：

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useStore from '@/store/index'
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const storeUser = useStore()
</script>

再次运行yarn build，成功打包！！！！

Vite特性报错

（类型引入错误）require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a ‘.js’ file extension and ‘D:\code\chendiyu\knowledge-has-no-limit\package.json’ contains.

使用require引入报的ES module导入错误
这个错误提示说明当前代码被当作 ES module 进行处理，但是使用了 CommonJS 的 require 语法，应该改为使用 import 语法。

如果你想继续使用 require 语法，可以按照提示中的建议将文件名改为 .cjs 后缀，或者在 package.json 中设置 “type”: “commonjs”。
如果你希望使用 ES module 的语法，可以将代码中的 require 改为 import。

Vite更加推荐使用 ES module 的写法

const mysql = require('mysql'); // 使用 CommonJS 的写法
import mysql from 'mysql' // 使用 ES module 的写法


// 使用 CommonJS 的写法
const fs = require('fs');

// 使用 ES module 的写法
import fs from 'fs';

版本问题

（echarts版本）Cannot read properties of undefined (reading ‘extendSeriesModel’)

echarts版本适用不兼容导致的

我本地的版本是5.4.3，过于高