❤ 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，过于高
