使用乾坤微前端nginx和服务器部署

nginx文件nginx.conf配置文件

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile            on;tcp_nopush          on;tcp_nodelay         on;keepalive_timeout   65;types_hash_max_size 4096;include             /etc/nginx/mime.types;default_type        application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server {listen       80;listen       [::]:80;server_name  _;root         /usr/share/nginx/html/dist;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location /base1 {root   /usr/share/nginx/html/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /base2 {root   /usr/share/nginx/html/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /vue-base1 {root   /usr/share/nginx/html/dist/child;index  index.html index.htm;try_files $uri $uri/ /vue-base1/index.html;}location /vue-base2 {root   /usr/share/nginx/html/dist/child;index  index.html index.htm;try_files $uri $uri/ /vue-base2/index.html;}error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}
# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }}

服务器打包之后文件目录

qiankun主程序主要代码：

main.js

import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start,initGlobalState } from 'qiankun';
const state={nickname:'one',age:888
}
// 初始化 state
const actions = initGlobalState(state);actions.onGlobalStateChange((state, prev) => {// state: 变更后的状态; prev 变更前的状态// console.log(state, prev);
});
setTimeout(()=>{actions.setGlobalState(state);
},2000)
// actions.offGlobalStateChange();
registerMicroApps([{name: 'vue-base1',entry: '//47.104.67.195/vue-base1/',container: '#vue-base1',activeRule: '/base1',props:{// name:"yang1",age:180}},{name: 'vue-base2',entry: '//47.104.67.195/vue-base2/',container: '#vue-base2',activeRule: '/base2',props:{name:"yang2",age:19}},// {//   name: 'guaranteeListTenderee',//   entry: 'http://localhost:8089/gtm/web/guarantee/#/Index/guaranteeListBidder',//   container: '#guaranteeListTenderee',//   activeRule: '/guaranteeListTenderee',//   props:{//     name:"yang2",//     age:19//   }// },// {//   name: 'gtm-loan-web',//   entry: '//localhost:8088',//   container: '#gtm-loan-web',//   activeRule: '/gtm-loan-web',//   props:{//     name:"yang2",//     age:19//   }// },
]);
// 启动 qiankun
start();
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

代码在这次提交中只有部到服务器主子应用部署后才有如上图的效果

·15011164760/quankunDemoPro@e82900e · GitHub

使用乾坤微前端nginx和服务器部署相关推荐

为什么要用微前端？如何使用乾坤微前端？
目录 1.效果图: 2.为什么要用: 2.1.项目越来越大,不好维护时 2.2.如果你不忙,想使用最新的技术又不想影响开发. 2.3.比如好不容易找到一个轮子,发现人家用的技术栈和自己的项目不一样时 ...
乾坤微前端_微前端架构初探以及我的前端技术盘点
前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
乾坤微前端_最全汇总之微前端知识和实战（EMP技术方案）
我们团队在早早聊的B站直播间分享了EMP微前端---团队半年以来的技术果实.分享的内容全在这里,会讲述微前端的由来,解决的问题,以及EMP微前端方案的不同之处,更有四个实战项目的总结,欢迎大家一起探讨 ...
乾坤微前端_拥抱云时代的前端开发架构——微前端
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员.团队的增加,从一个普通应用演变成一个巨石应用(Frontend Monolith),随之而来的应用不可维护的问题.这类问题在企业级 ...
乾坤微前端_前端优秀资源整理(持续更新~)
入门必备 developer-roadmap: 超级全的2020年前端学习路线 freeCodeCamp: 一步一步在线引导学习, 有很多开源的课程和代码职场必备 front-end-intervi ...
qiankun 微前端_qiankun 微前端应用实践与部署（二）
下面是两种方案的简要描述. 传统部署方式通过配置 nginx 端口到目录的转发. 具体可查看上一篇文章特点需要对外开放子应用对应的端口,将编译好的应用文件放到对应的配置目录. docker 部 ...
nginx视频服务器部署流程以及常用命令整理
1.docker部署nginx 不用使用pull命令也可以,直接run,docker会自动在本地仓库查找,如果本地没有,会自动从远程仓库拉取镜像 docker pull xujianjun229/ce ...
前端：Tomcat服务器部署Web项目
文章目录 1.1 C/S架构 1.2 B/S架构 2.1 服务器 2.2 常见服务器 3.1 Tomcat安装 3.2 Tomcat使用 3.3 Tomcat配置 3.4 Tomcat项目部署 4.1 ...
乾坤微前端优化（一）
前提 1. 同一个技术,都是react,或者都是vue. 2. 会webpack的dll配置. 思考发现各个应用之间,第三方的包都是很多的,假如我们在主应用把这些包抽取出来,后面子应用引入,可以极大 ...

使用乾坤微前端nginx和服务器部署

使用乾坤微前端nginx和服务器部署相关推荐

最新文章

热门文章