雅荷心语博客首先,如何打包出 umd.js
新建一个 xx.vue 组件, 写入代码后进行打包编译,
|
1 2 3 4 5 6 7 8 9 |
{ "name": "my-vue-component", "version": "1.0.0", "main": "dist/my-vue-component.umd.js", "scripts": { "serve": "vue serve xx.vue", "build": "vue build --target lib --name my-vue-component ./xx.vue" } } |
这里需要注意 打包的 –name ,指定为组件名称, 后续会使用到!
我们需要打包出干净的 umd.js 文件, 需要把 css 打包到 js 里, 在 xx.vue 同层目录里新建 vue.config.js
|
1 2 3 4 5 |
module.exports = { css: { extract: false } } |
配置就绪后正常打包 执行 npm run build
|
1 2 3 4 5 6 7 |
-rw-r--r-- 1 staff 289B Sep 27 18:03 demo.html -rw-r--r-- 1 staff 76K Sep 27 18:03 my-vue-component.common.js -rw-r--r-- 1 staff 98K Sep 27 18:03 my-vue-component.common.js.map -rw-r--r-- 1 staff 77K Sep 27 18:03 my-vue-component.umd.js -rw-r--r-- 1 staff 98K Sep 27 18:03 my-vue-component.umd.js.map -rw-r--r--@ 1 staff 26K Sep 27 18:03 my-vue-component.umd.min.js -rw-r--r-- 1 staff 115K Sep 27 18:03 my-vue-component.umd.min.js.map |
打包完成后将 umd.min.js 上传到 cdn 里, 后续使用!
打开自己的 Vue 工程项目, 准备使用这个 umd.js 文件
新增一个动态加载 js 的方法,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function loadComponent(url, componentName) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.async = true; script.onload = () => { resolve(window[componentName]); }; script.onerror = () => { reject(new Error(`Failed to load script: ${url}`)); }; document.head.appendChild(script); }); } |
然后在项目里新建一个 Div, #novel-reader-container , 开始引入 umd.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<template> <div class="cloak"> <div id="novel-reader-container"></div> </div> </template> export default { name: 'IndexPage', components: {}, data() { return {} }, methods: {}, mounted() { const componentUrl = 'https://storage.xxx.com/xxx/js/test/my-vue-component.umd.min.js'; const componentName = 'my-vue-component'; loadComponent(componentUrl, componentName) .then((component) => { console.log(component) // 注册全局组件 this.$options.components[componentName] = component; // 使用 Vue.extend 将其转换为构造函数 const ComponentConstructor = this.$options._base.extend(component); // 动态创建并挂载组件实例 new ComponentConstructor().$mount('#novel-reader-container'); }) .catch((error) => { console.error('Error loading component:', error); }); }, } |
搞定, 页面正常渲染出组件内容!
此方法适用于所有 vue 项目, 可实现动态加载组件及项目的插件扩展!
