前言

最近在做一个开源项目，项目完成后会进行开源，技术栈使用 Vue 3+vite+ts。
算是从头开始吧，本篇文章就作为项目过程中遇到的问题记录。
以后碰到类似的问题可以做个速查。

初始化项目

参考链接：Vite官网

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

问题记录

Module ‘“xx.vue“‘ has no default export.Vetur(1192)

项目初始化之后，打开项目中的HelloWorld.vue,发现如下报错

虽然不影响项目正常运行，但是看到报错很难受。
具体报错信息：

Module '"somepath/HelloWorld.vue"' has no default export.Vetur(1192)

从报错信息中可以看到该报错来自于Vetur。通过查找Vetur的Issue，发现该Issue提到：

If you look at recent changes made to vitepress, Evan seems to suggest the team to use Volar instead of Vetur for now, so maybe you can try using that until Vetur is up-to-date. 遂使用官方推荐的VSCode插件Volar,重启问题解决。

解决方案：

• 使用Volar插件替代Vetur

注意：使用Volar之后注释可能会与其他插件冲突，导致注释错乱，css用了html的注释，蛋疼。
需要禁用插件之后逐一开启插件测试冲突的那一个插件。(或者直接找vue相关的插件卸载测试)
我是vue这个插件引起的冲突，冲突率高的插件是vue 3 Snippets

配置别名报错 找不到模块“path”

具体报错信息：

找不到模块“path”或其相应的类型声明。ts(2307)

从报错信息可以看到，该错误是ts所报。
path这个模块是node.js内置的模块，而node.js本身是不支持ts的,所以会报错。\

解决方案：

安装@types/node依赖

$ yarn add @types/node

Vite 静态资源引入（动态引入静态资源）

在使用webpack作为打包工具时，动态引入本地静态资源我们可以直接在data中使用require：

data:{
  return{
    img:"require(path)"
  }　
}

但是Vite是不支持require的，按照上面的方法会报错require is undefined，所以我们需要使用别的方式进行解决。

解决方案

静态资源处理 | Vite (vitejs.net)

<div v-for="(item,index) in list">
  <img class="section-item_img" :src="getImageUrl(item.icon)" />
</div>

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

injection "Symbol(ssrContext)" not found.

安装新依赖之后重新运行项目，发现页面打不开，控制台报错如上，首先看到Error出现在App.vue中，但是没装依赖之前项目是正常运行的，通过卸载依赖、重装依赖、页面清空等操作发现项目都跑不起来。遂去Vite的issue中查找，发现了这条：TypeError: ssrContext is undefined · Issue #6043 · vitejs/vite (github.com)

I had tried to replicate your issue without succes. is correct should not happen in spa app.
vite 2.7 requires vue plugin version 1.10 and up \

意思是Vite 2.7以上的版本需要vue plugin高于1.10

解决方案：

• 手动更改@vitejs/plugin-vue的版本 高于1.10，或者删掉对应包管理工具的.lock文件
• 重装依赖，重启项目

<script setup></script>用法下父组件获取子组件实例

网上给出的教程一般是在父组件使用如下代码的方式去获取：

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    let ele = ref(null);
    onMounted(() => {
      console.log(ele.value)
    });
    return { ele }
  }
}
</script>

但是这个方式在<script setup></script>下并不适用

解决方案

使用defineExpose使用手动暴露出需要供父组件使用的变量/方法

<script setup lang="ts">
import { defineExpose, ref } from 'vue';
const value = ref('')
defineExpose({ value })
</script>

ant-design-vue vue3 + vite自定义树形表格展开Icon

直接写入到vue文件中报错，

解决方案

新建一个tsx文件，引入到vue文件中
icon.tsx

import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons-vue";

const expandIcon = (props: any) => {
  if (props.record.children && props.record.children.length > 0) {
    if (props.expanded) {//有数据-展开时候图标
      return <i style="color:'black';margin-right:8px"
        onClick={(e) => {
          props.onExpand(props.record, e);
        }}
      >
        <CaretDownOutlined />
      </i>
    } else {
      return <i style="color:'black';margin-right:8px"
        onClick={(e) => {
          props.onExpand(props.record, e);
        }}
      >
        <CaretRightOutlined />
      </i>
    }
  }
}
export default expandIcon