@vue/cli Vue2 模版迁移到微前端 EMP

删除 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 启动

@vue/cli Vue2 模版迁移到微前端 EMP

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。