微前端-project2项目VUE

52次阅读

共计 2465 个字符，预计需要花费 7 分钟才能阅读完成。

        微前端 —— 理论篇
        微前端 —— portal 项目
        微前端 —— menu&&project1（React）
        前一篇文章讲解了 react 项目在single-spa 微前端架构 中的应用，本篇为最后一篇，vue 项目 在此架构中的应用。

project2 项目我们就不自己搭建了，直接使用 vue-cli3 脚手架生成。

目录结构如下所示，标红的为新增的文件（output.js是我用来修改 vue 的 webpack 默认配置参考用的）

我们来看看新增的两个文件做了什么吧
project2.js

    import Vue from 'vue';
    import singleSpaVue from 'single-spa-vue';
    import App from './App.vue'
    
    const vueLifecycles = singleSpaVue({
      Vue,
      appOptions: {
        el: '#vue',
        render: r => r(App)
      } 
    });
    
    export const bootstrap = [vueLifecycles.bootstrap,];
    
    export const mount = [vueLifecycles.mount,];
    
    export const unmount = [vueLifecycles.unmount,];

可以看出，这个文件主要是将 vue 的入口组件作为渲染组件，将其渲染到 portal 项目 index.html 中 id 为 vue 的 Dom 元素中，注意引入 single-spa-vue 依赖包

vue.config.js

    const webpack = require('webpack')
    const path = require('path');
    
    module.exports = {
        chainWebpack: config => {config.entryPoints.clear()
            config.entry('project2').add('./src/project2.js').end()
            config.output.filename('project2.js').library('project2').libraryTarget('amd').end()
            config.devServer.port(8237).headers({"Access-Control-Allow-Origin": "*",})
            config.module.rule('images').use('url-loader').loader('url-loader').tap(options => ({
                limit: 4096,
                fallback: {
                loader: 'file-loader',
                options: {name: 'img/[name].[ext]'
                }
                }
            }))
        },
        outputDir: path.resolve(__dirname, 'build/project2')
    }

我们修改 webpack 的入口文件为我们上面新增的 project2.js，设置允许跨域，修改出口文件的名称
最后还有一个非常关键的问题，在打包静态资源的时候，在 index.html 中访问 project2 项目中的图片，默认为相对地址，相对的根目录是 portal 项目的域名和端口号，这明显是访问不到 project2 项目中打包的图片，我们只能通过 project2 项目中的域名和端口号加上相对地址才能访问到相关资源。因此，这里修改下 project2 项目中图片打包的文件名，不加 hash 值，并且在项目中引用图片的时候，通过这样的方式引用：

<template>
  <div id="vue">
    <img alt="Vue logo" src="http://localhost:8237/img/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import logo from './assets/logo.png'

export default {
  name: 'app',
  components: {HelloWorld}
}
</script>

http://localhost:8237是 project2 项目跑起来的 url 地址，/img/logo.png是 logo 图片 打包后的相对路径；由于未被引用的图片，webpack 不进行打包，因此在下面需要 import 一下：import logo from ‘./assets/logo.png’，这样 webpack 就会将图片打包进去。才能正常访问。

这个问题在之前的 menu&&project1 项目 中也同样存在，有关静态资源访问相关的，好像都会有这样的问题，我也是才开始接触这个微前端架构，目前也就想到这个解决方法，要是有小伙伴有更好的方法，在留言中分享一下哈！

Project2 项目源码
项目源码

微前端 —— 理论篇
微前端 —— portal 项目
微前端 —— menu&&project1（React）

最后总结一下这个项目运行起来的步骤

        1. 开启 公共依赖模块的服务 ，我的公共依赖模块在 portal 项目下 common-deps-static 文件夹中，只需要在这个文件夹下开启服务即可，可以通过 http-server 插件，端口设置为8000，并且设置跨域--cors
        2. 在portal、menu、project1 项目下，分别执行命令 npm run start
        3. 在project2 项目下，执行命令 npm run serve
        4.chrome 中打开页面：http://localhost:8233/ 即可