【vue3】远程组件加载

远程加载组件，动态更新组件，主框架不更新

参考 https://gitee.com/fanzhengshao/remote-components-library

用vite创建一个vue项目

添加remote目录，存放远程组件
添加rollup.config.js，用来打包配置远程组件

//  rollup.config.js
import vuePlugin from 'rollup-plugin-vue'
import babel from '@rollup/plugin-babel'
import json from "@rollup/plugin-json";
import postcss from 'rollup-plugin-postcss'
const path = require('path')
const resolve = (p) => {
    return path.resolve(__dirname, p)
}
const getEntry = (component) => {
    return resolve(`./remote/${component}/index.js`)
}

const titleCase = (strs) =>{
    let arr = strs.split('-')
    let newTitle =''
    arr.forEach(o=>{
        newTitle+= (o.slice(0,1).toUpperCase() + o.slice(1).toLowerCase())
    })
    return newTitle
}

const basePlugins = [
    vuePlugin(),
    json(), // 可以将 .json 文件转换为 ES6 模块
    babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**'
    }),

]
const devPlugins= []
const prodPlugins = []
const generalPlugins = (name) => {
    return [
        ...basePlugins,
        postcss({
            // extract: true,
            // Or with custom file name
            extract: path.resolve(`remoteDist/${name}/remote-${name}.css`)
        })
    ]
}
const externals = ["vue"]
const getPackageConfig = (name) => {
    return {
        input: getEntry(name),
        output: [
            {
                file: `remoteDist/${name}/remote-${name}.umd.js`,
                format: 'umd',
                name: `Remote_${titleCase(name)}`,
                globals: { // 设定全局变量的名称
                    'vue': 'Vue',
                },
                exports: "named",
            },

        ],
        plugins: [
            ...generalPlugins(name)
        ],
        external: [...externals]
    }
}
export default [
    getPackageConfig('button'),
    getPackageConfig('loading')
]

修改package.json

"scripts": {
  "dev:main": "vite",// 开发模式
  "build:remote": "rollup -c",// 打包远程组件
  "build:main": "vite build",// 打包项目
  "preview": "vite preview"
},
"dependencies": {
  "vue": "^3.2.25"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^2.3.0",
  "vite": "^2.9.0",
  "postcss": "^8.3.11",
  "@rollup/plugin-babel": "^5.3.0",
  "@rollup/plugin-json": "^4.1.0",
  "rollup-plugin-postcss": "^4.0.1",
  "rollup-plugin-vue": "^6.0.0",
  "@babel/core": "^7.15.8",
  "@babel/preset-env": "^7.15.8"
}

开发远程组件

假设我们要开发一个button组件
在remote中新建一个Button文件夹，在文件夹中新建index.js，index.vue。

index.js
import ScadaButton from './index.vue';
const install = (app) => {
    app.component(ScadaButton.name, ScadaButton);
}
export default {
    install,
    ScadaButton
}

index.vue

在vue项目中使用这个组件，App.vue引入组件并使用，import ButtonTest from ‘…/remote/Button/index.vue’，得到如下界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFdWD5Aj-1665380594002)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a627ecb6b3cf4c6e975cd5164ed0bcfe~tplv-k3u1fbpfcp-watermark.image?)]

打包组件

运行 npm run build:remote,得到生成目录remoteDist

运行组件web服务

进入remoteDist目录，运行python -m http.serve 9001启动web服务

编写远程加载组件的组件

在components目录新建 Remote.vue

/**
* ======================================
* 远程加载组件
* author: admin
* file: Remote.vue
* date: 2022/4/11 16:46
* ======================================
*/

使用远程组件

在main.js中添加，将vue挂载全局

import('vue').then(res => {
    console.log("vue",res)
    window.Vue = res
})

然后在需要使用组件的地方添加

import Remote from "./components/Remote.vue"


componentInfo:{
  js:'http://localhost:9001/button/remote-button.umd.js',
  css:'http://localhost:9001/button/remote-button.css',
  libraryName:'Remote_Button',
  componentName:'ScadaButton'
}

得到如下界面，此时修改这个按钮组件文件，远程加载的不会在改变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdtUmxwj-1665380594003)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec4c3c06e96140ad8f0f676e709e014b~tplv-k3u1fbpfcp-watermark.image?)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTWVhFcN-1665380594004)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb92690ea8d64ce3b00634fbfbe2a291~tplv-k3u1fbpfcp-watermark.image?)]

浏览器网络请求中有这个组件的文件加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDV8tDB4-1665380594004)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/382c115c0b0a4739812b3a7b6b2a823c~tplv-k3u1fbpfcp-watermark.image?)]

组件示例

/**
 * ======================================
 * 这是个示例
 * author: admin
 * file: RemoteBaseComponent.vue
 * date: 2022/4/11 16:46
 * ======================================
 */