微前端 —— project2項目（VUE）

kumfo 發布于2019-08-26 10:32 / 694人閱讀

摘要：前言微前端理論篇微前端項目微前端前一篇文章講解了項目在微前端架構中的應用，本篇為最后一篇，項目在此架構中的應用。項目我們就不自己搭建了，直接使用腳手架生成。

前言

????????微前端 —— 理論篇
????????微前端 —— 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值，并且在項目中引用圖片的時候，通過這樣的方式引用：

????????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/即可

GPU云服務器云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106339.html

微前端 —— 理論篇

摘要：現在開始從頭搭建我們的微前端架構。項目源碼微前端項目微前端微前端項目 1. 微前端 ????????基于spa類的單頁應用，隨著企業工程項目的體積越來越大，開發的功能越來越多，頁面也越來越多，項目隨之也變得越來越臃腫，維護起來十分困難，往往改一個logo，或者改一個小樣式，都要將項目全部重新打包一遍，維護困難，部署也困難。 ????????因此前端在借鑒后端的微服務架構模式后，衍生了...

wangbinke 2019-08-26 10:32 評論0 收藏0
微前端 —— portal項目

摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開始介紹項目。先實現公共依賴的引入吧。在上一步我們沒有引入的依賴包，是因為的依賴包是作為公共依賴導入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個項目的頁面文件。前言微前端 —— 理論篇上一篇介紹了微前端的理念，本片將開始介紹portal項目。 portal項目介紹 ????????portal項目包括兩個...

shiguibiao 2019-08-26 10:32 評論0 收藏0
使用 nginx 同域名下部署多個 vue 項目，并使用反向代理

摘要：花了天時間，趁著我還沒有忘記，先記錄下來效果目前有個項目，還有一個自帶的，我添加了對應的鏈接代碼稍后粘貼出來，為了統一管理子項目的路由。花了 3 天時間，趁著我還沒有忘記，先記錄下來效果目前有 2 個項目（project1, project2），還有一個 nginx 自帶的 index.html，我添加了對應的鏈接代碼（稍后粘貼出來），為了統一管理子項目的路由。我期望實現下面的...

saucxs 2019-07-25 14:39 評論0 收藏0
微前端 —— menu&&project1（React）

摘要：前言微前端理論篇微前端項目上一篇中，我們完成了項目的搭建，算是完成了整個微前端架構的一半工程了。項目項目是作為頁面的菜單顯示的，主要用于路由的控制。源碼地址源碼地址項目源碼地址微前端理論篇微前端項目微前端項目前言 ????????微前端 —— 理論篇????????微前端 —— portal項目????????上一篇中，我們完成了portal項目的搭建，算是完成了整個微前端架構的一半...

Euphoria 2019-08-26 10:32 評論0 收藏0