vue知识点之import 、import() 与 @import 的区别

import

import xx from '...' 是一种导入方式，是es6模块化的新语法，必须要写到js文件的最上面；

可以用来导入 静态资源（图片、文档）的路径，也可以导入 js、vue文件。

import()

import('...') 是 import() 函数，主要作用是实现动态加载模块，可以写到任意位置，代码运行到该语句才会加载该模块，它返回一个promise对象；

🔔 只能导入js 或者 vue模块，不能导入静态资源！

// 默认导入 导入的变量名是 myModule
import('./myModule.js').then(myModule=> {
    console.log(myModule.default);
});
​
// 或者是在vue-router中引入路由组件（非常好用！）
routes= [
    {
       path: '/404',
       component: ()=>import('@/views/404'),
    }
]

⚠️ 注意： import() 里面的path不能使用 @ 这些路径别名，可以这样写 /src/assets/img/xxx.png

@import

@import 'xxx' 是css的语法，虽然和 import长得很像，但是它们之间没有任何关系，通过@import 可以在一个css文件中引入另一个css文件(比如字体图标)

@import'./icon.less'; // 必须要写分号！！