Vite创建Vue项目后遇到的问题

前言

  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")
1
2
3
4
5
6
7
8
9
10
11
12

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

// tsconfig.json
{
  "compilerOptions": {
    /* Linting */
    // 当noUnusedLocals为true时，声明的变量未使用时会有警告
    "noUnusedLocals": false,
    // 当noUnusedParameters为true时，函数的参数未使用时会有警告
    "noUnusedParameters": false,
  }
}
1
2
3
4
5
6
7
8
9
10

  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

问题四

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

// tsconfig.json
{
  "compilerOptions": {
  	"moduleResolution": "Bundler",
    "type": [ "element-plus/gobal" ] 
  }
}
1
2
3
4
5
6
7

  给出的原因是：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插件，请点击 官方配置