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

Question

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

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

Answer 1

import Shops from './shops'

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

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

// index.jsimport Shops from './index.vue'export default Shops

Answer 2

安装插件 vue peek

Answer 3

你可以通过配置jsconfig.js去跳转，可通过vuejs生成模版的jsconfig.js

npx jsconfig.json --template=vuejs

Answer 4

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

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

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

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

1. 使用绝对路径：你可以使用绝对路径来导入 Shops 模块，例如：

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

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

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

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

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

import Shops from 'Shops';

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

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