微前端 —— project2项目（VUE）

kumfo 发布于2019-08-26 10:32 / 686人阅读

摘要：前言微前端理论篇微前端项目微前端前一篇文章讲解了项目在微前端架构中的应用，本篇为最后一篇，项目在此架构中的应用。项目我们就不自己搭建了，直接使用脚手架生成。

前言

        微前端 —— 理论篇
        微前端 —— 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项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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