加载远程Vue文件

vue3-sfc-loader

vue3-sfc-loader ，它是Vue3/Vue2 单文件组件加载器。

在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境，无需 (webpack) 构建步骤。

主要特征

• 支持 Vue 3 和 Vue 2（参见dist/）
• 仅需要 Vue 仅运行时构建
• 提供esm和umd捆绑包（示例）
• 嵌入式ES6模块支持（含import()）
• TypeScript 支持、JSX 支持
• 自定义 CSS、HTML 和脚本语言支持，请参阅pug和stylus示例
• SFC 自定义块支持
• 通过日志回调正确报告模板、样式或脚本错误
• 专注于组件编译。网络、样式注入和缓存由您决定（参见下面的示例）
• 轻松构建您自己的版本并自定义您需要支持的浏览器

  编写Node接口

  编写Node接口提供服务，用于返回vue文件

  项目初始化和安装

  mkdir nodeServecd nodeServenpm iniy -ynpm install express cors

  项目完整结构

  nodeServer├── index.js├── loaderVue2.vue├── loaderVue3.vue├── package-lock.json└── package.json

  添加 index.js

  // express 基于Node.js平台，快速、开放、极简的 Web 开发框架 https://www.expressjs.com.cn/const express = require("express")const app = express()const cors = require("cors")const fs = require('fs');// 配置cors中间件，允许跨域app.use(cors())app.get("/getVue2Str", (req, res) => {    // 服务端读取文件，并变成字符串。传递给前端    const data = fs.readFileSync('./loaderVue2.vue', 'utf8');    res.send({        code:200,        fileStr:data,        fileName:"loaderVue2.vue"    });})app.get("/getVue3Str", (req, res) => {    // 服务端读取文件，并变成字符串。传递给前端    const data = fs.readFileSync('./loaderVue3.vue', 'utf8');    res.send({        code:200,        fileStr:data,        fileName:"loaderVue2.vue"    });})app.listen(3000, () => {    console.log("服务启动成功：http://localhost:3000")})

  这里用到的两个vue文件代码如下

  loaderVue2.vue

        
  我是远程加载的组件
          触发父组件方法  export default {  props: ["value"],  methods: {    changeName(e) {      this.$emit("input", e.target.value);    },    patchParentEvent() {      this.$emit("parentEvent");    },  },};h1 {  color: red;}

  loaderVue3.vue

        
  我是远程加载的页面
          调用父组件的方法  import {defineProps,defineEmits,ref,onMounted} from "vue"const props = defineProps(['modelValue'])// 更新model绑定的值固定写法: update:modelValueconst emit = defineEmits(['update:modelValue',"childClick"])let input = ref("")onMounted(()=>{  input.value = props.modelValue  // window环境指向的是接收方的window环境  console.log(window.testName);})const changeValue = (e) => {  // 修改父组件的值  emit('update:modelValue',e.target.value)}const emitParentFun = ()=>{  emit('childClick',input.value)}.text-red{  color: red;}

  运行

  node index.js

  接口返回的格式如下

  http://localhost:3000/getVue2Str

  {    "code": 200,    "fileStr": "\r\n  \r\n    
  我是远程加载的组件
  \r\n    \r\n    触发父组件方法\r\n  \r\n\r\n\r\nexport default {\r\n  props: [\"value\"],\r\n  methods: {\r\n    changeName(e) {\r\n      this.$emit(\"input\", e.target.value);\r\n    },\r\n    patchParentEvent() {\r\n      this.$emit(\"parentEvent\");\r\n    },\r\n  },\r\n};\r\n\r\n\r\n\r\nh1 {\r\n  color: red;\r\n}\r\n\r\n",    "fileName": "loaderVue2.vue"}

  Vue2项目使用

  安装 vue3-sfc-loader

  npm install vue3-sfc-loader

  使用

  注意：

  vue2要从dist/vue2-sfc-loader这个目录下引入loadModule使用

  vue2要从dist/vue3-sfc-loader这个目录下引入loadModule使用

          import * as Vue from "vue"import {loadModule} from "vue3-sfc-loader/dist/vue2-sfc-loader"export default {  name: 'App',  data() {    return {      name: "李四",      remote: null,      url: "http://localhost:3000/getVue2Str",    }  },  mounted() {    this.load(this.url)  },  watch: {    name(newName) {      console.log(newName, "监听到变化")    }  },  methods: {    // 加载    async load(url) {      let res = await fetch(url).then(res => res.json());      const options = {        moduleCache: {          vue: Vue        },        async getFile() {          return res.fileStr        },        addStyle(textContent) {          const style = Object.assign(document.createElement('style'), {textContent})          const ref = document.head.getElementsByTagName('style')[0] || null          document.head.insertBefore(style, ref)        },      };      // 加载远程组件      this.remote = await loadModule(res.fileName || "loader.vue", options)    },    // 子组件调用    parentEvent() {      console.log("父组件事件触发")    }  }}

  效果显示

  Vue3项目使用

  安装

  npm install vue3-sfc-loader

  使用

  注意：

  vue2要从dist/vue2-sfc-loader这个目录下引入loadModule使用

  vue2要从dist/vue3-sfc-loader这个目录下引入loadModule使用

          import {loadModule} from "vue3-sfc-loader/dist/vue3-sfc-loader"import * as Vue from 'vue'import {onMounted, defineAsyncComponent, ref, watchEffect} from "vue"let remote = ref()let name = ref("李四")let url = "http://localhost:3000/getVue3Str"onMounted(() => {  load(url)})watchEffect(() => {  console.log(name.value)})const childClick = (newVal) => {  console.log("子组件点击事件", newVal)}// 加载远程文件const load = async (url) => {  let res = await fetch(url).then(res => res.json());  const options = {    moduleCache: {      vue: Vue    },    async getFile() {      return res.fileStr    },    addStyle(textContent) {      const style = Object.assign(document.createElement('style'), {textContent})      const ref = document.head.getElementsByTagName('style')[0] || null      document.head.insertBefore(style, ref)    },  };  // 加载远程组件  remote.value = defineAsyncComponent(() => loadModule(res.fileName || "loader.vue", options))}

  完整源码

  https://gitee.com/szxio/load-remote-vue-components

  求Start