vue-cli 引入外部 JS 库的两种方式 #36
Description
需求描述
在业务开发中，需要将各种 JS 库引入 vue-cli 中。有两种方式可以实现需求，一种是在 main.js 中全局引入，另一种则是在指定的组件中局部引入。
方案调研
调研过程
因为需要在 vue-cli 中引入 hls.js 这个库，所以用 vue/vue-cli + hls/hls.js 进行 Google，找到了解决方案。
入选方案
- Use Any Javascript Library With Vue.js：介绍了以全局方式引入 JS 库的方法，文章的回复也干货满满。
- 前端页面播放流媒体：介绍了在具体组件中局部引入
hls.js的方法。
应用过程
全局引用
// main.js
// 先引入这个库
import hlsjs from 'hls.js';
// 然后挂载到 Vue 实例的原型上
Object.defineProperty(Vue.prototype, 'Hls', { value: hlsjs });
// 或
Vue.prototype.Hls = hlsjs;
// 在组件中使用时
// App.vue
if (this.Hls.isSupported()) { ... }局部引用
// App.vue
import hlsjs from 'hls.js';
window.Hls = hlsjs;
if (Hls.isSupported()) { ... }注意
所引用的外部库，不要求非得在当前项目所在的目录之内，完全可以是项目之外的某个文件。不过如果是不同分区上的文件（对于 Windows 系统来说），就不知道了。而且把代码放到两个分区，这个习惯不大好吧。
// e:\codebase\utils\addcnzz.js
const AddCnzz = () => {
const hostName = window.location.hostname;
const sites = [
{
domain: 'abc',
id: '123',
},
{
domain: 'def',
id: '456',
},
];
const site = sites.find(ele => hostName.match(ele.domain)) || null;
if (site) {
const script = document.createElement('script');
script.src = `https://s11.cnzz.com/z_stat.php?id=${site.id}&web_id=${site.id}`;
document.body.appendChild(script);
}
}
export default AddCnzz;// App.vue
import AddCnzz from '../codebase/utils/addcnzz';
created() {
AddCnzz();
}要点总结
如果所引入的 JS 库需要在各个组件中都用到，那么建议用全局引用的方式。否则就用局部引用的方式，而且局部引用之后，可以直接调用该 JS 库的实例，不用加 this 关键字。