微前端 —— project2項目（VUE）

前言

        微前端 —— 理論篇
        微前端 —— portal項目
        微前端 —— menu&&project1（React）
        前一篇文章講解了react項目在single-spa微前端架構中的應用，本篇爲最後一篇，vue項目在此架構中的應用。

Project2

        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/便可