vite-plugin-federation踩坑

yanyihan16

已于 2023-02-15 10:56:37 修改

阅读量4.3k

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2022-05-11 16:27:09 首次发布

本文链接：https://blog.csdn.net/yanyihan16/article/details/124708959

版权

在尝试使用vite-plugin-federation构建微前端时，遇到TS编译错误及浏览器兼容性问题。通过修改package.json的build命令，解决TS报错；在老版本Chrome上发现top-level-await不支持，导致SyntaxError；若样式未生效，可在vite.config.ts中调整配置。最终成功在本地引用并注册远程组件。

摘要由CSDN通过智能技术生成

前言

项目即将用到vite-plugin-federation，开始参照网上的教程和vite-plugin-federation的官方文档试验最简单的微前端。
这里主要参照 VUEShenzhen 在掘金和知乎上的文章去实现
下面是我照以上文章所作的尝试

一、准备工作

1、项目搭建

搭建两个vite项目
在自己的项目目录下打开cmd执行npm create vite@latest 分别创建vite-host 和vite-remote两个项目，目标是vite-remote
在这里插入图片描述
进入项目，并执行npm install 和 npm i @originjs/vite-plugin-federation

成功后执行npm run dev，项目正常运行并打开http://localhost:3000/和http://localhost:3001页面显示正常

2、远程端（vite-remote1）文件修改

将远程端的vite-remote的HelloWorld.vue的内容拆分成几个组件，在加上文章中的Button.js（不在项目中引用）的内容
在这里插入图片描述

Button.vue

<template>
  REMOTE BUTTON<br/>
  <button type="button" @click="count++">NEW TEST count is: {
  { count }}</button>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      count: ref(0)
    }
  },
}
</script>

HelloWorld.vue

<script setup lang="ts">
import Button from './Button.vue';
import Urls from './Urls.vue';

defineProps<{ msg: string }>()
</script>

<template>
  <h1>{
  { msg }}</h1>
  <Urls></Urls>
  <Button></Button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>