Vue.js 引入js文件

方法一:按需引入

参考链接:https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

参考链接:https://www.cnblogs.com/sxz2008/p/8245282.html

参考链接:https://segmentfault.com/q/1010000014685738

1、在main.js中引入js文件

let stringUtils = require('./assets/js/extensions/string.extensions')
Vue.prototype.$stringUtils = stringUtils

在组件中 通过this.$stringUtils 使用,但是这里有个问题。

使用export default导出,在组件中使用this.$stringUtils.default才能访问到该对象。

在其他的平台中看见了答案,如下:

webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。

我们通常写 .vue 单文件组件时,在 script 语言块中使用的是 ES6 的语法,使用 export default 进行默认导出。

require 是 CommonJS(和 AMD,想不到吧?)的模块导入方式,不支持模块的默认导出,因此导入的结果其实是一个含 default 属性的对象,因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句,ES6 的模块化导入导出语法参见 http://es6-features.org/#Valu...,import 时需要给定一个变量名,所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法,导出的是 module.exports 对象作为组件选项,那么使用 require 导入时就不需要使用 .default 来获取。

建议学习一下学习 Vue 你需要知道的 webpack 知识,是我发起的公益讲座,本讲座自 2017 年 7 月 11 日起一年内的收入捐给讲座说明中的轻松筹项目受助人。

参考链接:https://segmentfault.com/q/1010000011171159

转载于:https://www.cnblogs.com/Currention/p/11045766.html

猜你喜欢

转载自blog.csdn.net/weixin_33691598/article/details/93208879