Vue--import...from..._vue3 引入 from '..' 代表什么-优快云博客

本文链接：https://blog.youkuaiyun.com/refaker/article/details/115399050

本文详细介绍了在编程中如何使用不同路径引用模块，包括相对路径（./ 和 ../）、别名（@/）以及~@的用法。还解释了在省略文件后缀时的加载优先级，如.js优于.vue。同时，提到了当从文件夹导入时的查找逻辑，涉及到package.json的存在和main字段。最后，讨论了webpack配置中alias的设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路径写法

一种写法是./引用，表示同级目录下的绝对路径

import hello from './hello';

一种是用../引用，表示上一级目录下的绝对路径

import hello from '../hello';

一种写法是@/引用

import hello from '@/components/hello';

@的相关设置可以在webpack.base.conf.js文件中找到

    module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src')
        }
      }
    ...
    }

这表示，@等同于为src文件夹。

另一种是~@引用，其中~表示根目录，~@表示根目录下@配置的路径。

省略后缀与引入文件夹

其中，extensions数组中展示了可以引入的文件类型，分别是.js，vue，.json文件。

其中.js文件和.vue文件在引入时可以省略后缀，.json文件在引入时不能省略后缀。

//这两者等同
import hello from './hello.js';
import hello from './hello';
//这两者等同
import hello from './hello.vue';
import hello from './hello';
//这两者不等同
import hello from './hello.json';
import hello from './hello';

如果一个文件夹中同时存在hello.js与hello.vue文件，那么引入优先级是

js>vue

也就是说，在省略后缀的情况下，在文件夹中先找.js文件，再找.vue文件。

import除了上面三种文件，还可能直接从文件夹中引入

import hello from './components';

在这种情况下，引入文件的逻辑是

if(文件夹中package.json存在 && package.main字段存在 && package.main指定的js存在) {
    取package.main指定的js作为from的来源，即使该js可能格式或内容错误
} else if(index.js存在){
    取index.js作为from的来源
} else {
    取index.vue作为from的来源
}

因此，如果是从一个没有后缀的文件引入，那么from的来源可能是.js、.vue或者文件夹。