Vue--import from--省略后缀/加载文件夹--方法/实例

￡神魔★判官ぃ 2023-09-28 20:31 8阅读 0赞

原文网址：[Vue--import from--省略后缀/加载文件夹--方法/实例\_IT利刃出鞘的博客-CSDN博客][Vue--import from--_--_IT_-CSDN]

### 简介 ###

本文介绍Vue在import时省略后缀以及import文件夹的方法。

## 省略后缀 ##

**说明**

可以配置省略后缀，比如：test.js，只用test即可。

**官网网址**

[解析(Resolve) | webpack 中文文档][Resolve_ _ webpack]

**详解**

配置文件：webpack.base.conf.js（也可以在vue.config.js中配置相应的位置）

（下边这个是默认配置，项目中不配置也是这样的规则）。

module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
      }
    ...
    }

这里的extensions指定了from后可导入的文件类型。上面定义的这3类可导入文件，js和vue是可以省略后缀的。

例如：

对于test.js，可以用如下两种任一方式导入：

import test from './test'
    import test from './test.js'

对于test.vue，可以用如下两种任一方式导入：

import test from './test'
    import test from './test.vue'

json不可以省略后缀，只能如下导入（如果去掉后缀则编译出错）：

import test from './test.json'

**文件名相同的处理流程**

若test.vue，test.js同时存在于同一个文件夹下，会按照配置的顺序进行导入。比如：按上边的配置，.js优先于.vue，则import的导入优先级是：js > vue。

## 加载文件夹 ##

### 简介 ###

**说明**

可以import文件夹。例如：import test from './components'。

若from文件夹，则对于该文件夹下的文件：

*  如果package.json存在且设置正确的情况下，会加载package.json；
 *  若不满足，则加载index.js；
 *  若不满足，则加载index.vue。

**详解**

伪代码如下：

在该目录下：

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

### 实例 ###

以vue-element-admin的代码为例。

**1. 路由配置中导入layout文件夹**

![efc65f1bbb82431b8056f1cb9d500ee7.png][]

此时，按照规则，会去加载package.json，没有；则找index.js，没有；再找index.vue，找到了。

**2.layout/index.vue引入目录**

![5043c52f37fe4d70a59884c425b23856.png][]

引入的是components/index.js

![1b6179cf170b4977bd871489d9ebe389.png][]

**3.components/index.js引入各个组件**

![f6e5fb54c80d4031ad036356497580b2.png][]

## 其他网址 ##

[Vue中import from的来源：省略后缀与加载文件夹\_超频化石鱼的博客-CSDN博客][Vue_import from_-CSDN]

[Vue--import from--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126355581
[Resolve_ _ webpack]: https://webpack.docschina.org/configuration/resolve/#resolveextensions
[efc65f1bbb82431b8056f1cb9d500ee7.png]: https://img-blog.csdnimg.cn/efc65f1bbb82431b8056f1cb9d500ee7.png
[5043c52f37fe4d70a59884c425b23856.png]: https://img-blog.csdnimg.cn/5043c52f37fe4d70a59884c425b23856.png
[1b6179cf170b4977bd871489d9ebe389.png]: https://img-blog.csdnimg.cn/1b6179cf170b4977bd871489d9ebe389.png
[f6e5fb54c80d4031ad036356497580b2.png]: https://img-blog.csdnimg.cn/f6e5fb54c80d4031ad036356497580b2.png
[Vue_import from_-CSDN]: https://blog.csdn.net/fyyyr/article/details/83657828