前言

  Vite 创建 Vue项目还算顺利，但创建后不是万事大吉，遇到了各种的问题。现在就自己遇到的问题做个总结。

问题

问题一

  创建后，在未修改任何配置的前提下，自行新建Home.vue组件，并在main.ts中导入，然后代码出现下划线

// main.ts
import { createApp } from 'vue'
import App from './App.vue'import IconSvg from './components/Iconfonts/IconSvg.vue'const app = createApp(App)// 注册组件
app.component("IconSvg", IconSvg)app.mount("#app")

  划线原因：IconSvg被定义但未被赋值。
  查找资料并且逐一测试后，发现问题出现在tsconfig.json文件中。

// tsconfig.json
{"compilerOptions": {/* Linting */// 当noUnusedLocals为true时，声明的变量未使用时会有警告"noUnusedLocals": false,// 当noUnusedParameters为true时，函数的参数未使用时会有警告"noUnusedParameters": false,}
}

  noUnusedLocals默认值是true，表示声明的变量未使用时会有警告，所以需要修改成false
  同样地，也需要修改noUnusedParameters的值为false，不修改表示函数的参数未使用时会有警告

问题二

  当我像在VueCli引入ElementPlus图标时，发现除了需要unplugin-icons和unplugin-auto-import之外，还需要@iconify-json/ep，这是两者的区别。

问题三

  Vite中使用axios，直接向一个完整的本地地址发送请求，后端在没有配置跨域的情况下，依然可以接受返回数据。这不知道是不是bugs还是Vite机制的问题。若VueCLi中不在后端配置跨域，那么即使直接向一个完整的本地地址发送请求，都会出现跨域问题。

<template><div style="width: 200px;"><el-row><el-input v-model="input" placeholder="请输入" /><el-button @click="summit">提交</el-button></el-row>    </div>
</template><script setup lang="ts">import axios from 'axios'const input = ref('')const summit = (input) => {axios.get('http://localhost:3000/login').then((response) => {input.value = response.data}).catch((error) => {console.log(error)})}
</script>

问题四

  在tsconfig.json文件中，“type”: [ “element-plus/gobal” ] 有下划线警告

// tsconfig.json
{"compilerOptions": {"moduleResolution": "Bundler","type": [ "element-plus/gobal" ] }
}

  给出的原因是：Vite 生成器找不到“element-plus/global”的类型定义文件。
  翻资料后发现是因为 TS 升级到5.x带来的规范性问题。
  解决方法：

• （1）将 TS 版本改为4.x，这会规避问题的出现
• （2）“moduleResolution”: “Bundler” 改为 “moduleResolution”: “node” 即可

  参考资料： github-elementplus-issues

补充

• 了解 unplugin-auto-import 插件，请点击 官方配置。
• 了解unplugin-vue-components插件，请点击 官方配置