时间戳

首页 > 解决方案 > 在 vue js 组件中导入和使用本地 javascript 文件的有效方法是什么？

vue.js - 在 vue js 组件中导入和使用本地 javascript 文件的有效方法是什么？

问题描述

我在 Vue.js 组件的 script 标签中写了如下：

require("./js/swiper.min.js");
require("./js/wow.min.js");
export default {
    mounted(){
         var swiper = new Swiper('.swiper-container',{pagination: '.swiper- 
         pagination', paginationClickable: true,});
         new WOW().init();
    } 
}

这导致我出现以下错误

[Vue warn]: Error in mounted hook: "TypeError: Cannot assign to read only
property 'exports' of object '#<Object>'"

它在index.html（一个简单的 HTML 文件）中正常工作，但在 Vue.js 组件中它给出了错误。

在 Vue.js 中使用本地 javascript 文件是否正确？

标签： vue.jsvuejs2vue-router

解决方案

这看起来像是导出与requirevs的工作方式之间的冲突import

您可以使用requirewithmodule.exports和importwith export defaults。现在你正在混合它们，这可能会导致问题。

在这里很好地解释了这一点：https ://github.com/almende/vis/issues/2934#issuecomment-292698456

你不应该做这样的事情：

// myModule.js
import x from 'module-x'
...
module.exports = something

反而：

common.js 方式

// myModule.js
const x = require('module-x')
// Here there is a trick, if module-x is exported as ES6 with a default export it would be
const x = require('module-x').default
...
module.exports = something

或者

ES6方式

// myModule.js
import x from 'module-x'
...
export default something

推荐阅读