Vue3+TS+vite遇见的问题

前言

该文章记录一些Vue3的经常遇见的问题，后续将会逐步增加，所有内容均从网上整理而来，加上自己得理解做一个整合，方便工作中使用。

问题

1. 在main.ts中引入App.vue报错

//1.解决办法一：vscode中是否安装插件
插件：Typescript Vue Plugin(Volar)
插件：Vue Language Features(Volar)

//2.解决办法二：在env.d.ts
/// <reference types="vite/client" />
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}

//3.解决办法三：App.vue
<script lang="ts">
  console.log(123)
</script>
增加"setup"
<script setup lang="ts">
  console.log(123)
</script>

2. Eslint 报错：Parsing error: Unexpected token

//.eslintrc.cjs配置文件中
parser: 'vue-eslint-parser', // FIX:Parsing error: Unexpected token
parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',// FIX:Parsing error: Unexpected token
},

3. 初始化了Pinia,可还是报错需要初始化

检查main.ts初始化pinia，正常初始化

import './assets/css/main.css'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import persisted from 'pinia-plugin-persistedstate'

const app = createApp(App)

const pinia = createPinia()
console.log('mian')
app.use(pinia.use(persisted))
app.use(router)
app.mount('#app')

检查到了request.ts：问题就就在request.ts文件比main.ts文件先运行，导致pinia未初始化，就使用了其中的方法，所以不能在request.ts使用pinia

import axios from 'axios'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

//错误
const userStore = useUserStore()
const { token } = storeToRefs(userStore)

//修改
const { token } = JSON.parse(localStorage.getItem('user-token') || '{}')

const instance = axios.create({
  baseURL: 'https://statute.youxuantp.com/api',
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    if (token) {
      config.headers.token = token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

4. 传递参数类型判断错误

<el-table-column align="center" prop="c" label="企微通知" width="200">
  <template #default="{ row }">
    <el-switch
      v-model="row.c"
      :loading="switchLoading"
      @change="(val:any) => changeSwitch(val, row)"
      style="--el-switch-on-color: rgba(31, 87, 249, 1)"
    />
  </template>
</el-table-column>

@change="(val:any) => changeSwitch(val, row)" 错误提示，意思不能用:

@change="(val) => changeSwitch(val, row)" 如果取消类型判断，则会提示:参数“val”隐式具有“any”类型。

解决办法：

@change="changeSwitch($event, row)"

5. Vue3+TypeScript+Vite使用require动态引入图片等静态资源

先说结论吧，在vite中不能使用require引入图片资源，因为这里的require貌似是webpack提供的一种加载能力，由于我们并非使用的webpack作为项目的构建工具，我们使用的是Vite，因此这里必须转用 Vite提供的静态资源载入，vite关于这一部分的官方说明在这里，有兴趣的小伙伴可以看官方的文档：Vite中静态资源处理；

解决办法：

//utils.ts
export const getImgUrl = (path: string): string => {
  return new URL(`../assets/img/${path}`, import.meta.url).href
}
//注意：import.meta.url不用管
//注意：`../assets/img/${path}` 当前文件到图片的文件地址