[JavaScript知识库]vue 微前端 用nginx 发布流程总结（qiankun）

vue 微前端 用nginx 发布流程总结（qiankun）

什么是微前端

微前端架构具备以下几个核心价值：

1、技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权

2、独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

3、增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

4、独立运行时
每个微应用之间状态隔离，运行时状态不共享

一、vue微前端主应用配置地址

vue微前端配置地址：

 name: 'appone',//微应用名字
 entry: '//127.0.0.1:1800/appone/', // 微前端访问地址
 container: '#appone-container', // 挂载的主应用ID
 activeRule: '#/appone/app' // 微前端匹配的公共路由地址

二、vue微前端微应用配置注意事项

vue微前端微应用配置注意事项：
提示：需要改vue.config.js vue的配置文件

module.exports = {
    publicPath: 'appone' // 需要添加publicPath  否则微应用 index.html 里面的 js/css 路径不会带上 /app1/
}

三、nginx配置 微服务appone

微服务appone appone.conf：

server {
        listen       1810;
        server_name  127.0.0.1;

        index  index.html index.htm;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
         location / {
             root   /opt/www/appone;
             index  index.html;
        }

        location /api/ {
            proxy_pass      http://127.0.0.1:9020/v2.0/;
            proxy_set_header        Host    host;
            proxy_set_header x-forwarded-for $remote_addr;
        }
}

四、nginx配置 主应用配置

微服务appone app.conf：

server {
        listen       1800;
        server_name  127.0.0.1;

        index  index.html index.htm;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
         location / {
            root   /opt/www/app;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }

        location /appone/ {
           proxy_pass http://127.0.0.1:1810/;
           proxy_set_header Host $host:$server_port;
       }


        location /api/ {
            proxy_pass      http://127.0.0.1:9020/v2.0/;
            proxy_set_header        Host    host;
            proxy_set_header x-forwarded-for $remote_addr;
        }
}

五、nginx 打包后如下放置

微应用（appone）主应用（app），打包后如下放置：

└── /opt/www/                     # 根文件夹
    |
    ├── app/                # 存放所有主应用的文件夹
    |   ├── css/         
    |   ├── fonts/      
    |   ├── img/        
    |   ├── js/     
    |   ├── static/     
    |   ├── index.html   
    ├── appone/            # 存放appone微应用的文件夹
    |   ├── appone/    # 存放appone微应用独立访问的文件夹
    |   |   ├── css/         
    |   |   ├── fonts/      
    |   |   ├── img/        
    |   |   ├── js/     
    |   |   ├── static/     
    |   |   ├── index.html 
    |   ├── css/         
    |   ├── fonts/      
    |   ├── img/        
    |   ├── js/     
    |   ├── static/     
    |   ├── index.html 

总结

提示：微前端访问地址：

微前端主应用访问地址： http://127.0.0.1:1800/
微前端微应用访问独立访问地址：http://127.0.0.1:1800/appone/