Vue2中的 import 和 require区别与使用方法

约 808 字大约 3 分钟

2025-08-01

import 属于 ES6 规范，require 属于 CommonJS 规范。

`export default` 和 `export + import`

`export default function()` + `import`

output.js

export default function () {
  console.log("我是export default 的函数");
}

demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export default 时
// import 的名字可以任意起,不加{}
// 因为export default 的和 import 的是一个引用，所以可以重命名
import mytest from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mytest();
  },
  methods: {},
};
</script>

运行结果：

`export function pName ()` + `import`

output.js

export function printName(name) {
  console.log("我是export的函数，名字是" + name);
}

demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export时
// import 的名字必须和 export 的名字一致，必须加{}
// export 和 import 的是同一个对象，所以不能重命名
import { printName } from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    printName("alice");
  },
  methods: {},
};
</script>

运行结果：

`export default object` + `import`

output.js

const person = {
  name: "Alice",
  age: 30,
  sex: "female",
  sayHi: function () {
    console.log("hello world");
  },
};
export default person;

demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export default 时，不加{}
// import 的名字可以任意起,不加{}
// 因为export default 的和 import 的是一个引用，所以可以重命名
import person22 from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(person22);
    person22.sayHi();
  },
  methods: {},
};
</script>

运行结果：

`export {info,name}` + `import`

output.vue

const info = "i am info string";
const name = "Alice";
export { info, name };

demo.js

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
// export时，必须加{}
// import 的名字必须和 export 的名字一致，必须加{}
// export 和 import 的是同一个对象，所以不能重命名
import { info, name } from "../assets/js/output.js";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(info);
    console.log(name);
  },
  methods: {},
};
</script>

运行结果：

`export` & `import` 解释说明

import 属于 ES6 规范
exoprt 和 export default 也是 ES6 规范
export 是导出, export dafault 是默认导出
一个模块可以有多个 export, 但是只能有一个 export default
export default 可以和多个 export 共存

`module.exports` 和 `exports.xxx + require`

`module.exports` & `require`

output.js

const name1 = "Alice";
const person = {
  name: "lilith",
  age: 1000,
  sex: "female",
  sayHi: function () {
    console.log("Hi, I am lilith");
  },
};
module.exports = {
  name1,
  person,
};

demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // exports.xxx 是 module.exports一种简写形式
    // exports.xxx 是 module.exports 不要混用
    const mydata = require("../assets/js/output.js");
    console.log({ mydata });
    console.log(mydata.name1);
    mydata.person.sayHi();
  },
};
</script>

运行结果：

`exports.xxx` & `require`

output.js

const name1 = "Alice";
const person = {
  name: "lilith",
  age: 1000,
  sex: "female",
  sayHi: function () {
    console.log("Hi, I am lilith");
  },
};
exports.name1 = name1;
exports.person = person;

demo.vue

<template>
  <div class="">
    <p>测试在vue中import和require的区别</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // exports.xxx 是module.exports一种简写形式
    // exports.xxx 是module.exports 不要混用
    const mydata = require("../assets/js/output.js");
    console.log({ mydata });
    mydata.person.sayHi();
  },
};
</script>

运行结果：

`exports` & `require` 解释说明

require 属于 CommonJS 规范
require 是运行时调用,所以是动态执行的，所以在性能上会比 import 差一些.
导出时是什么样, require 导入时就还是什么样
exports 是 module.exports 一种简写形式,不能直接给 exports 赋值
直接给 module.exports 赋值时,exports 会失效