手机电商网站 模板,常熟做网站优化,焦作公司做网站,梧州论坛Vite创建Vue项目后遇到的问题 前言问题问题一问题二问题三问题四 补充 前言 Vite 创建 Vue项目还算顺利#xff0c;但创建后不是万事大吉#xff0c;遇到了各种的问题。现在就自己遇到的问题做个总结。
问题
问题一 创建后#xff0c;在未修改任何配置的前提下#xff0c… Vite创建Vue项目后遇到的问题 前言问题问题一问题二问题三问题四 补充 前言 Vite 创建 Vue项目还算顺利但创建后不是万事大吉遇到了各种的问题。现在就自己遇到的问题做个总结。
问题
问题一 创建后在未修改任何配置的前提下自行新建Home.vue组件并在main.ts中导入然后代码出现下划线
// main.ts
import { createApp } from vue
import App from ./App.vueimport IconSvg from ./components/Iconfonts/IconSvg.vueconst 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中不在后端配置跨域那么即使直接向一个完整的本地地址发送请求都会出现跨域问题。
templatediv stylewidth: 200px;el-rowel-input v-modelinput placeholder请输入 /el-button clicksummit提交/el-button/el-row /div
/templatescript setup langtsimport axios from axiosconst 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插件请点击 官方配置
