相关疑难解决方法(0)

我有一个使用 Vite/Vitest 的 vue3 项目，如 Vue.js 文档中的推荐。

这是该项目的结构：

src
  components
    // my Vue components here, potentially in sub-folders. For example:
    HelloWorld.vue 
  router
    index.ts
  App.vue
  main.ts
vitest
  components
    // My test specs. For example:
    HelloWorld.spec.ts
// ...
tsconfig.app.json
tsconfig.json
tsconfig.vite-config.json
tsconfig.vitest.json
vite.config.ts

@/文件夹的别名在src组件文件中正确解析。但是，在我的测试文件中，我收到错误：找不到模块。

例如，在HelloWorld.spec.ts：

src
  components
    // my Vue components here, potentially in sub-folders. For example:
    HelloWorld.vue 
  router
    index.ts
  App.vue
  main.ts
vitest
  components
    // My test specs. For example:
    HelloWorld.spec.ts
// ...
tsconfig.app.json
tsconfig.json
tsconfig.vite-config.json
tsconfig.vitest.json …

我已经通过vue3 - vite导入组件安装了该项目，例如

import Component from '../../../../components/Component.vue'

我只想给 src 文件夹取别名然后做

import Component from '@/components/Component.vue'

这是我的vite.config.js

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // ...
                }
            }
        })
    ]
}

我错过了什么吗？我还应该做什么？

我通过npm init vue@latest（使用vitest）创建了一个新的 Vue 项目。里面./src/components是一个__test__包含组件单元测试的目录。

如果你想测试你的视图文件，是否打算__test__为该目录创建另一个目录？./src/views

因此，当使用按类型结构的文件夹时（您可能还想按功能结构使用文件夹），项目可能看起来像

src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyComponent.vue\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyComponent.spec.vue\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView2.vue\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.spec.vue\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyView2.spec.vue\n

请不要误会我的意思，这不是个人喜好的问题。我只是想知道 vitest 希望我如何做到这一点。

因为当__test__我的代码旁边有一个目录时，为什么不将规范文件放在代码旁边并删除该目录呢？

例如

src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyComponent.vue\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyComponent.spec.vue\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.spec.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView2.vue\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyView2.spec.vue\n

如果有人能够解释在 Vue 项目中使用 vitest 的“常见”方式，那就太好了，因为到目前为止，我在test该目录旁边添加了一个目录src并镜像了结构，但似乎 vitest/Vue 更喜欢一种不同的方法。

这也可能与 …