# micro-app

**Repository Path**: lore/micro-app

## Basic Information

- **Project Name**: micro-app
- **Description**: 京东微前端框架MicroApp使用示例
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-11
- **Last Updated**: 2025-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 官方文档

[MicroApp文档](https://jd-opensource.github.io/micro-app/docs.html#/)


## 代码框架

- main-主应用：vue3 + vite + ts
- vue3-子应用一: vue3 + vite + js
- vue2-子应用二: vue2 + webpack


## 页面

![示意图](./docs/images/example.png)

## 常见问题

1. vite作为子应用只需切换到iframe沙箱
```
<micro-app name='xxx' url='xxx' iframe></micro-app>
```

2.  主应用警告：vue3: [Vue warn]: Failed to resolve component: micro-app

```
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => /^micro-app/.test(tag)
        }
      }
    })
  ],
})
```

3. vue2+webpack 跨域
```
// build/webpack.dev.conf.js
devServer: {
	headers: {
	  'Access-Control-Allow-Origin': '*',
	}
}
```
4. vue2项目 eslint报错
- a. 执行命令
```
-  npm i prettierrc
```
- b. 新建 .prettierrc.json
```
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}
```