亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

微前端 —— project2項(xiàng)目（VUE）

kumfo / 781人閱讀

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

前言

????????微前端 —— 理論篇
????????微前端 —— portal項(xiàng)目
????????微前端 —— menu&&project1（React）
????????前一篇文章講解了react項(xiàng)目在single-spa微前端架構(gòu)中的應(yīng)用，本篇為最后一篇，vue項(xiàng)目在此架構(gòu)中的應(yīng)用。

Project2

????????project2項(xiàng)目我們就不自己搭建了，直接使用 vue-cli3 腳手架生成。


????????目錄結(jié)構(gòu)如下所示，標(biāo)紅的為新增的文件（output.js是我用來修改vue的webpack默認(rèn)配置參考用的）
????????


????????我們來看看新增的兩個(gè)文件做了什么吧
????????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,
    ];

????????可以看出，這個(gè)文件主要是將vue的入口組件作為渲染組件，將其渲染到portal項(xiàng)目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，設(shè)置允許跨域，修改出口文件的名稱
????????最后還有一個(gè)非常關(guān)鍵的問題，在打包靜態(tài)資源的時(shí)候，在index.html中訪問project2項(xiàng)目中的圖片，默認(rèn)為相對(duì)地址，相對(duì)的根目錄是portal項(xiàng)目的域名和端口號(hào)，這明顯是訪問不到project2項(xiàng)目中打包的圖片，我們只能通過project2項(xiàng)目中的域名和端口號(hào)加上相對(duì)地址才能訪問到相關(guān)資源。因此，這里修改下project2項(xiàng)目中圖片打包的文件名，不加hash值，并且在項(xiàng)目中引用圖片的時(shí)候，通過這樣的方式引用：

????????http://localhost:8237是project2項(xiàng)目跑起來的url地址，/img/logo.png是logo圖片打包后的相對(duì)路徑；由于未被引用的圖片，webpack不進(jìn)行打包，因此在下面需要import一下：import logo from "./assets/logo.png"，這樣webpack就會(huì)將圖片打包進(jìn)去。才能正常訪問。


????????這個(gè)問題在之前的menu&&project1項(xiàng)目中也同樣存在，有關(guān)靜態(tài)資源訪問相關(guān)的，好像都會(huì)有這樣的問題，我也是才開始接觸這個(gè)微前端架構(gòu)，目前也就想到這個(gè)解決方法，要是有小伙伴有更好的方法，在留言中分享一下哈！

Project2項(xiàng)目源碼
項(xiàng)目源碼

微前端 —— 理論篇
微前端 —— portal項(xiàng)目
微前端 —— menu&&project1（React）

????????最后總結(jié)一下這個(gè)項(xiàng)目運(yùn)行起來的步驟


????????1.開啟公共依賴模塊的服務(wù)，我的公共依賴模塊在portal項(xiàng)目下common-deps-static文件夾中，只需要在這個(gè)文件夾下開啟服務(wù)即可，可以通過http-server插件，端口設(shè)置為8000，并且設(shè)置跨域--cors
????????2.在portal、menu、project1項(xiàng)目下，分別執(zhí)行命令npm run start
????????3.在project2項(xiàng)目下，執(zhí)行命令npm run serve
????????4.chrome中打開頁面：http://localhost:8233/即可

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106339.html

相關(guān)文章

  • 微前端 —— 理論篇

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

    wangbinke 評(píng)論0 收藏0

  • 微前端 —— portal項(xiàng)目

    摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開始介紹項(xiàng)目。先實(shí)現(xiàn)公共依賴的引入吧。在上一步我們沒有引入的依賴包，是因?yàn)榈囊蕾嚢亲鳛楣惨蕾噷?dǎo)入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個(gè)項(xiàng)目的頁面文件。 前言 微前端 —— 理論篇 上一篇介紹了微前端的理念，本片將開始介紹portal項(xiàng)目。 portal項(xiàng)目介紹 ????????portal項(xiàng)目包括兩個(gè)...

    shiguibiao 評(píng)論0 收藏0

  • 使用 nginx 同域名下部署多個(gè) vue 項(xiàng)目，并使用反向代理

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

    saucxs 評(píng)論0 收藏0

  • 微前端 —— menu&&project1（React）

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

    Euphoria 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<