浏览器插件动态插入Vue远程组件

浏览器插件

配置文件

inject: [
	{ url:"组件链接", el: "插入的选择器" }
]

调用

injectRemoteComponents(config.inject || []);

实现

async function injectRemoteComponents(Components) {
  if (Components && Components.length) {
    for (let item of Components) {
      try {
      	// 参数 url,params,responseType
        const results = await ajaxGet(item.url, { t: Date.now() }, "text");
        new Function(results)();
        const vm = new Vue({
          store,
          // 传递数据
          provide: {},
          render: (h) => h(window.MyLib.default),
        }).$mount(document.createElement("div"));
        document.querySelector(item.el).appendChild(vm.$el);
      } catch (e) {
        console.error("组件加载失败");
      }
    }
  }
}

生成组件项目

webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.exports = {
  entry: {
    button: "./components/Button/index.vue"
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "./dist"),
    library: "MyLib",
    libraryTarget: "umd",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      // sass预处理器
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin(), new VueLoaderPlugin()],
  resolve: {
    extensions: [".js", ".vue", ".json"],
  },
  mode: "production",
};

package.json

"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.4",
"style-loader": "^2.0.0",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"sass-loader": "^6.0.7",
"node-sass": "^4.14.1"

可以把生成的button.js可以放到oss上

这篇好文章是转载于：学新通技术网