@vue/cli Vue2 模版迁移到微前端 EMP删除node_modules目录在package.json删除以下依

删除 node_modules 目录
在 package.json 删除以下依赖

    "@vue/cli-service": "~4.5.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",

yarn add -D @efox/emp-cli @efox/emp-vue2
yarn
在项目根目录创建 emp-config.js

const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
  const projectName = 'vue2Base'
  const port = 8009
  config.output.publicPath(`http://localhost:${port}/`)
  config.devServer.port(port)
  config.plugin('mf').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        name: projectName,
        library: {type: 'var', name: projectName},
        filename: 'emp.js',
        exposes: {
        },
        // shared: ['vue/dist/vue.esm.js'],
      },
    }
    return args
  })

  config.plugin('html').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        title: 'EMP Vue2 Base',
      },
    }
    return args
  })
})

修改 public/index.html 的 head

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <!-- EMP inject css -->
  <% for (let i in htmlWebpackPlugin.options.files.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" /><% } %>
  <!-- EMP inject js -->
  <% for (let i in htmlWebpackPlugin.options.files.js) { %>
  <script src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script><% } %>
</head>

将 package.json 的 script 修改为以下内容

  "scripts": {
    "dev": "emp dev",
    "build": "emp build --env prod",
    "start": "emp serve",
    "stat": "emp build --analyze",
    "emp": "emp"
  },

删除 babel.config.js
重命名 main.js 为 bootstrap.js
新建 main.js

import('./bootstrap')

即可使用emp, yarn dev 启动