【Vue】中 import from 的来源:省略后缀与加载文件夹

Vue 中 import from 的来源:省略后缀与加载文件夹

Vue 使用 import ... from ...来导入组件,库,变量等。而 from 后的来源可以是 js,vue,json。这个是在 webpack.base.conf.js 中设置的:

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

这里的 extensions 指定了 from 后可导入的文件类型。

而上面定义的这 3 类可导入文件,js 和 vue 是可以省略后缀的:

import test from './test.vue'

等同于

import test from './test'

同理:

import test from './test.js'

等同于:

import test from './test'

json 文件不可以省略后缀:

import test from './test.json'

省略为:

import test from './test'

则编译出错。

那么,若 test.vue,test.js 同时存在于同一个文件夹下,则 import 的导入优先级是:
.js > .vue

posted @ 2021-02-10 13:50  [ABing]  阅读(169)  评论(0编辑  收藏  举报