Vue3+vite+qiankun+nginx微前端部署方案

凡农哥哥
1,248 阅读26分钟

服务器准备

首先你需要购买一台服务器，这里略过，因为有个架构师给了我一台服务器让我随便玩。于是，我拿到了服务器地址，账号和密码：

账号名：zhen
服务器地址：35.81.199.99
密码：618618(#^.^#)

进入服务器

ssh zhen@35.82.155.32

然后输入密码，进入服务器。

进来后，你需要在服务器上安装node环境和nginx。这一步我也暂时跳过，因为架构师他也装好了，所以，如何在linux服务器上安装node和nginx，请自行攻略。

构建静态文件并上传到服务器

假定你已经有一个vue的项目，请在项目中打包出这样的dist文件：

并通过scp将本地文件上传到服务器上，将本地文件上传到服务器上的某个文件夹下。

scp -r dist/ chen@35.82.155.32:/usr/share/nginx/

如果提示你没有权限，在linux服务器里使用chmod在linux上修改文件夹权限。如果可以成功上传，则跳过该步骤

sudo chmod -R 777 文件夹

成功上传dist文件后，在你的/usr/share/nginx/文件夹下，可以看到文件已经上传上来

修改nginx配置

找到你的nginx.conf所在的路径，我的路径在/etc/nginx目录下，配置

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/dist/; // 你的dist文件在Linux服务器上的绝对路径
        index        index.html

        error_page 404 /404.html;
        location = /404.html {}

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {}
    }

如果你没有Linux命令基础，请移步google了解常用的vim命令学习如何在Linux上修改文件。

配置好后，重启远程服务的nginx服务

sudo systemctl restart nginx

到这一步，万里长征终于迈出第1步，访问服务器地址http://35.82.155.32/  可以看到网站已经上线了。

作为一个多年前端开发，由于基本都在大公司crud，这些事情都是运维负责，前端仅需要将代码上传后，cicd自动跑完后后面上线的所有流程。所以，这次为了熟悉服务器命令，熟悉Nginx几乎花了我一天的时间，惭愧。

文章后续更新计划

目前，在该服务器上部署了多个项目，接下来的一两天时间，将分享同服务器多项目部署的注意事项。

另外，我已经在本地完成了基于qiankun+vue3+vite的微前端方案初步拆分，在后续的学习当中，将实现微前端基座子应用的项目上线，并分享运维零基础上线时踩过的坑。

踩坑1

第一次进入页面后可以加载子应用，一旦刷新后，页面立即重定向到子应用的独立项目，与主应用再也无关了经过排查，发现nginx给刷新后的子应用配置了转发，一刷新就命中了Nginx上的精准路径。

踩坑2

当一切都配置好之后，也进入了子应用的页面，第一次能够正常加载，但是，一旦刷新页面，http://35.82.155.32/micro/app-vue3/#/，就会出现404现象。经过排查，发现nginx的配置没有设置try\_files这个配置，这样，刷新后就无法找到对应的文件了。

踩坑3，主应用子应用样式未隔离

由于基座与子应用都是初始化的vue3项目，在main.css中都有对#app设置样式的代码，主应用删除掉该样式后，子应用一旦生效，该样式仍然会生效。在qiankun的start方法里，开启sandbox仍然无法生效，最终只能采取老方法隔离样式。

踩坑4

独立的子应用http://35.82.155.32/self\_vue3\_history/从这个路径跳转到http://35.82.155.32/self\_vue3\_history/home后，跳转过去后再刷新，界面变成主应用。

原因：

因为子应用是部署在与主应用同服务器名的二级路径下，而且是history模式的路由，因此，刷新时nginx配置中的try_files需要去publicPath下寻找入口index.html文件

解决：

vite.config.js中的base配置publicath：

base: process.env.NODE_ENV === 'production' ? '/self_vue3_history' : '/',

Nginx配置：

        location  /self_vue3_history {
                alias /usr/share/nginx/nong-micro-vue3-history/dist/;
                index index.html;
#               try_files $uri $uri/ /index.html;
                try_files $uri $uri/ /self_vue3_history/index.html; # 带上publicPath,防止刷新后找不到二级项目入口
        }

踩坑5

本地开发联调时，静态资源在独立的子应用http://localhost:8083中可以访问（部署到线上也可以正常访问资源文件）

但是在主应用http://localhost:5173/micro/app-vue3-hash#/中访问子应用时，图片资源显示404，根据下图可以看到，子应用中的静态文件也去主应用5173端口下去拿了。

原因：

原文回答见：github.com/tengmaoqing…

vite 目前在development模式的时候，base设置了之后是不生效的。你可以关注vite 后续是否会支持，在vite issue里看到有人提了这个问题了。

解决方式：

在vite.config.js的server选项中，增加origin的配置：

  server: {    origin:"http://localhost:8083"  },

加上之后，本地主应用下的子应用获取静态资源文件就会采用绝对路径了，见下图：

另外注意，使用@路径background-image: url("@/assets/ct5.jpg"); 这种引入这种方式解决不了问题。

附仓库、nginx配置

仓库地址

nginx配置：

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root        /usr/share/nginx/dist/;
        index        index.html

        include /etc/nginx/default.d/*.conf;

        location /micro {
                alias /usr/share/nginx/dist/;
                index index.html;
                try_files $uri $uri/ /index.html;
        }
        location /main {
                alias /usr/share/nginx/dist/;
                index index.html;
        }
        location /self_vue3_hash {
                alias /usr/share/nginx/nong-micro-vue3-hash/dist/;
                index index.html;
                try_files $uri $uri/ /index.html;
        }
        location  /self_vue3_history {
                alias /usr/share/nginx/nong-micro-vue3-history/dist/;
                index index.html;
#               try_files $uri $uri/ /index.html;
                try_files $uri $uri/ /self_vue3_history/index.html;
        }
    }

有参考意义的文章：

1：xmetal.cc/?p=2138

avatar
文章
阅读
粉丝