在 vue 中引入非 es6 js 文件可以通过创建并设置 src 属性指向该文件路径的 script 标签,并设置 type 属性为 "text/javascript" 来实现。如果非 es6 js 文件导出的是 commonjs 模块,则需要使用 object.assign 将其分配给 export default 对象。
在 Vue 中引入非 ES6 JS 文件
在 Vue 中,可以通过使用 script
标签来引入非 ES6 JS 文件。
步骤:
- 创建 script 标签:在 Vue 组件模板中,创建一个 script 标签。
-
指定非 ES6 JS 文件路径:在 script 标签中,使用
src
属性指定非 ES6 JS 文件的路径。 -
设置 type 属性:将 script 标签的
type
属性设置为"text/javascript"
。
示例:
<code class="html"><template><div></div>
</template><script>
// 引入 non-es6.js 文件
import nonES6Js from './non-es6.js';
</script>
注意点:
- 确保非 ES6 JS 文件导出一个名为
default
的对象或函数。 - 如果非 ES6 JS 文件包含 CommonJS 模块,则需要使用
Object.assign
将其分配给export default
对象。
示例(CommonJS):
<code class="javascript">// non-es6.js
module.exports = {
foo: 'bar'
};
<code class="html"><template><div></div>
</template><script>
// 引入 non-es6.js 文件
import nonES6Js from './non-es6.js';
// 分配 CommonJS 模块
export default Object.assign({}, nonES6Js);
</script>