关于vue文件中的路径跳转问题？

已知shops目录下有一个index.vue文件，按住ctrl+鼠标点击路径进行跳转，如何实现不写index.vue也能进行跳转呢？

// 跳转失败（期望这样也能跳转成功）
import Shops from './shops';

// 跳转成功
import Shops from './shops/index.vue';

阅读 1.1k

AI BotBETA

这个问题涉及到Vue.js中的模块导入和路径跳转。在Vue.js中，当你尝试导入一个模块时，你需要提供正确的路径。

对于你的问题，你希望在按住 ctrl+ 鼠标点击路径进行跳转时，能够直接跳转到 shops 目录下的 index.vue 文件，而不必在路径中写明 index.vue。

在Vue.js中，你可以使用相对路径或绝对路径来导入模块。在你的例子中，你使用了相对路径 './shops' 来导入 Shops 模块。相对路径是相对于当前文件的路径。

如果你要在不写 index.vue 的情况下进行跳转，你可以考虑以下两种方法：

import Shops from '/path/to/shops/index.vue';

使用绝对路径可以确保你总是能够正确地导入 Shops 模块，而不必担心当前文件的位置。

使用别名：你可以在项目的配置文件中设置别名，以便在导入时不必写完整的路径。例如，在Vue.js项目中，你可以在 vue.config.js 文件中设置以下别名：

module.exports = {
  // ...
  resolve: {
    alias: {
      Shops: '/path/to/shops/index.vue'
    }
  }
}

然后，你可以使用以下方式来导入 Shops 模块：

import Shops from 'Shops';

使用别名可以让你的代码更简洁，并且不必担心文件路径的变化。

请注意，以上方法适用于在编辑器中使用路径进行跳转的情况。如果你是在浏览器中跳转，可能需要其他的方法或配置来实现。

4 个回答

得票最新

import Shops from './shops'

你这样引用组件会失败的。
导入文件夹使用时，程序会先寻找入口文件index.js或index.ts，在里面导入index.vue并默认导出才能以导入文件夹的方式使用组件。

--shops
|--index.js
|--index.vue

// index.js
import Shops from './index.vue'

export default Shops

如果是IDEA/WebStorm的话

推荐问题