关于qiankun微前端项目的问题总结

最新推荐文章于 2025-10-11 20:06:02 发布

原创最新推荐文章于 2025-10-11 20:06:02 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文讲述了在Vue2主应用与Vue3微应用共存时可能出现的配置问题，包括vue-router版本兼容性及初始化设置。在本地使用Express服务模拟线上部署时，遇到了跨域问题。通过在Express的app.js中添加跨域配置解决，但发现配置的位置影响了其效果。最终，将跨域设置移到文件开头成功解决了问题。

前期配置参考

我写的主应用是vue2.0,微应用是vue3.0, 前期配置参考 时注意初始化项目时必须要将vue-router加入到项目中不然可能会出现以下问题

1、export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘

2、 Object.defineProperty called on non-object

3、export ‘createWebHistory, createRouter‘ was not found in ‘vue-router‘

出现这些问题的原因无非就是你的vue-router版本与当前你的项目中某些东西不兼容导致的，只用在初始化的时候用整的一套，基本就不会出问题了

后面想模拟下部署到线上的操作，于是在本地起了两个express服务（本地启用express服务参考这个注意这个操作前提是要全局安装好express【npm install express -g】），一个用于主应用，一个用于微应用，然后将我的主应用和微应用分别打包后，丢到不同的express服务中的public文件夹下测试效果，结果不出所料遇到跨域问题

Access to fetch at 'http://localhost:7001/' from origin 'http://localhost:30......

于是去到express项目中的app.js文件末尾处修改跨域配置 Access-Control-Allow-Origin

app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});