vue.js - unplugin-vue-components在vue-router中无法自动导入组件？

Question

在view/HomeView.vue使用自定义组件时一直找不到，只能在App.vue里能找到，
报错：No loader is configured for ".vue" files: packages/components/card/Card.vue

Answer 1

相对路径的问题。安装vue-loader 和 vue-template-compiler也没解决问题。
以为App.vue就是所有的入口，结果HomeView.vue也是入口；
我用unplugin-vue-components导入的是自定义组件，我的组件放在src同级的packages目录下，如果从App.vue去找是能找到的，但换了views/HomeView.vue就是从当前文件的路径去找就找不到了；
在vite.config.ts配置一个别名，使其能定位到packages目录下

resolve: {  alias: {    '@': fileURLToPath(new URL('./src', import.meta.url)),    '@packages': fileURLToPath(new URL('./packages', import.meta.url))  }}

Answer 2

这个错误提示表明，你的项目中没有为 ".vue" 文件配置加载器（loader）。在 Webpack 中，文件需要经过特定的加载器处理后才能被打包进最终的 bundle 中。对于 ".vue" 文件，通常需要配置 vue-loader。

要解决这个问题，你需要在项目的 Webpack 配置中添加 vue-loader。具体步骤如下：

1. 首先，确保你已经安装了 vue-loader 和 vue-template-compiler。如果没有，可以通过 npm 安装：

npm install --save-dev vue-loader vue-template-compiler

2. 接着，在你的 Webpack 配置文件（通常是 webpack.config.js）中，添加或修改 module.rules 部分，添加对 ".vue" 文件的处理规则：

module.exports = {  // ... 其他配置 ...  module: {    rules: [      // ... 其他规则 ...      {        test: /\.vue$/,        loader: 'vue-loader'      }    ]  }  // ... 其他配置 ...};

3. 最后，确保你的项目使用了支持 Vue 的 Webpack 版本。Vue 2 需要 Webpack 4，而 Vue 3 需要 Webpack 5。如果你的项目使用的是旧版本的 Webpack，你可能需要升级。

完成以上步骤后，Webpack 应该能够正确处理 ".vue" 文件，你的组件应该能够被正确导入和使用了。如果仍然遇到问题，检查你的导入语句是否正确，并确保你的组件路径是正确的。