vue动态加载静态js插件

vue项目中需要动态加载插件,这些插件是用vue-cli 构建的库，可以参考[vue-cli3 打包组件为单个js文件],构建后插件目录是这样的：

构建后的插件库

这些文件的作用[官网]都有说明。

一些思考

• 服务器中插件目录plugins和static是同级的，涉及到根目录的问题，而vue-cli支持设置 [publicPath]。
• 静态js文件加载一般有3种方式：script,import/require,ajax请求。script 适合在index.html里面尝试，于是只剩2种方式了，都试试看喽。

1. import/require方式

这种方法预先设置了publicPath:

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}


const Demo = require(`${this.publicPath}plugins/demo/dist/demo.umd`);

一直报错：找不到该模块

image.png

看来publicPath不能这样使用。
借鉴[其他人的经验]，发现webpack要求require必须要有模块所在的位置信息,这样写在根目录下webpack找不到。于是稍作改良：

 const Demo = require(`@/../public/plugins/demo/dist/demo.umd`);

居然成功了！本地起个服务,验证下build后是否正常:

npm install -g serve
serve -s dist

完全ok，正确加载了。

2. ajax请求方式

  let demo= null;
  this.$axios
  .get("/plugins/demo/dist/demo.common.js")
  .then(function (response) {
       demo= eval(response.data);
   });        

demo内容是这样的（误打了个1）：

demo

以上2种方式经验证都可以使用，注意本地运行的话需要在public文件夹下放置这些插件。

注意：

1. require内容不能使用变量，如下写法会报错:

  let aa = "@/../public/demo.umd";
  const Demo = require(aa);

error

2. 2种方式加载的文件类型不一样

• import/require方式加载 umd包
• ajax方式加载 common包

后记

看到这里估计有疑问为啥要加载打包后的js文件？开篇已经说了：需要动态加载插件。
这些插件都是可插拔的，会缓存在vuex中，进行动态更新，这就涉及[vue加载动态组件]的功能了，欢迎查看参考。