说明

  1. ├── public                # html
  2.     ├── index.html        # 主应用
  3.     ├── view.html         # 子应用
  4. ├── src                   # 主应用
  5.     ├── layout            # 页面布局
  6.     ├── router            # 路由
  7.     ├── view              # 页面
  8.     ├── App.vue           # 视图入口
  9.     ├── main.js           # 项目入口
  10. ├── srcview               # 子应用
  11.     ├── router            # 路由
  12.     ├── view              # 页面
  13.     ├── App.vue           # 视图入口
  14.     ├── main.js           # 项目入口

目录结构

image.pngimage.png

vue.config.js 配置

  1.  pages: {
  2.     index: {
  3.       entry: './src/main.js',
  4.       template: './public/index.html',
  5.       filename: 'index.html',
  6.       title: "主应用",
  7.     },
  8.     view1: {
  9.       entry: './srcview/main.js',
  10.       template: './public/view.html',
  11.       filename: 'view.html',
  12.       title: "子应用",
  13.     },
  14.   }
  18. const { defineConfig } = require('@vue/cli-service')
  19. module.exports = defineConfig({
  20.   transpileDependencies: true,
  21.   pages: {
  22.     index: {
  23.       entry: './src/main.js',
  24.       template: './public/index.html',
  25.       filename: 'index.html',
  26.       title: "主应用",
  27.     },
  28.     indexCopy: {
  29.       entry: './src-copy/main.js',
  30.       template: './public/index-copy.html',
  31.       filename: 'index-copy.html',
  32.       title: "子应用",
  33.     },
  34.   }
  35. })

跳转

  1. <!-- 转到ecp页面下的MyWork路由（不加#/MyWork表示只跳转到ecp页面） -->
  2. <!-- <a href="index#/MyWork" target="_blank">123</a> -->
  3. //href中存放跳转的是在vue.config.js中配置的属性，而不是文件名,
  4. //例如上面的配置中的页面名称：主应用是:index，子应用是:indexCopy
  5. //所以在href中存放index会跳转到主应用，放indexCopy会跳转到子应用
  6. <a href="indexCopy" target="_blank">321</a>