使用TypeScript时似乎缺少 “@types/node” 依赖，以及路径别名问题

[tthzwq]

使用TypeScript时似乎缺少 “@types/node” 依赖

路径别名配置似乎也有问题

 > html:src/App.vue:5:7: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
    5 │ import '@/components/HelloWorld.vue'
      ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > html:/src/views/HomeView.vue:5:7: error: Could not resolve "@/components/TheWelcome.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
    5 │ import '@/components/TheWelcome.vue'
      ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// import { fileURLToPath } from 'url'
import { resolve } from 'path'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      //  '@/': fileURLToPath(new URL('./src/', import.meta.url))
      '@': resolve(__dirname, 'src')
    }
  }
})

[zhanglolo]

不应该是import HelloWorld from '@/components/HelloWorld.vue'，为什么你这里直接import组件

[tthzwq]

不应该是import HelloWorld from '@/components/HelloWorld.vue'，为什么你这里直接import组件

没有直接import组件。项目创建完成后没有改动代码, 我粘贴的是控制台打印的错误
将 vite.config.ts 文件中的 '@/': fileURLToPath(new URL('./src/', import.meta.url))
改为 '@': fileURLToPath(new URL('./src/', import.meta.url)) 就行了，难道是因为Windows系统的问题？

[zhanglolo]

不应该是import HelloWorld from '@/components/HelloWorld.vue'，为什么你这里直接import组件

没有直接import组件。项目创建完成后没有改动代码, 我粘贴的是控制台打印的错误 将 vite.config.ts 文件中的 '@/': fileURLToPath(new URL('./src/', import.meta.url)) 改为 '@': fileURLToPath(new URL('./src/', import.meta.url)) 就行了，难道是因为Windows系统的问题？

Mac os 上正常。

[sodatea]

似乎是 / 引起的。
Vite 2 之后 alias 不需要加 /，我给忘了。

[tthzwq]

似乎是 / 引起的。 Vite 2 之后 alias 不需要加 /，我给忘了。

另外使用TypeScript时，这个是不是缺少 “@types/node” 依赖

[sodatea]

是的……感谢指出

[zhanglolo]

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // "@": fileURLToPath(new URL("./src", import.meta.url)), 
      // "@/": fileURLToPath(new URL("./src", import.meta.url)), //error
      // "@": fileURLToPath(new URL("./src/", import.meta.url)),
      // '@/': fileURLToPath(new URL('./src/', import.meta.url))
    },
  },
});

测试了这四种情况，只有第二种会报错。
@TThz-hz 你的错误能像这样再次还原吗。

[tthzwq]

看一下最近的 commit，已经修复了

      // "@": fileURLToPath(new URL("./src", import.meta.url)), 
      // "@/": fileURLToPath(new URL("./src", import.meta.url)),  //error
      // "@": fileURLToPath(new URL("./src/", import.meta.url)),
      // '@/': fileURLToPath(new URL('./src/', import.meta.url))   //error

[zhanglolo]

看一下最近的 commit，已经修复了

      // "@": fileURLToPath(new URL("./src", import.meta.url)), 
      // "@/": fileURLToPath(new URL("./src", import.meta.url)),  //error
      // "@": fileURLToPath(new URL("./src/", import.meta.url)),
      // '@/': fileURLToPath(new URL('./src/', import.meta.url))   //error

有点奇怪，我本地第四种是正常进入的，组件也都能加载。

[tthzwq]

'@/': fileURLToPath(new URL('./src/', import.meta.url))

Windows系统

[zhanglolo]

😂 Mac OS, 看样子还和系统有关？