前端微服务架构3-项目启动及打包部署

启动

关于项目的结构：子应用的文件夹在父应用的src同级

父子应用可以单独启动，单独启动就不说了

关于一起启动

1、安装npmall: npm install npm-run-all --save-dev

2、编写启动命令

"scripts": {

    "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "dev:all": "npm-run-all --parallel start:*",   //并行启动以start开头的所有服务

    "start:cw-qk1": "cd cw-qk1 && npm run serve",

    "start:main": "npm run dev"

  },

 

打包部署问题

history项目打包在vue.config.js中设置 publicPath: '/',

由于是两个项目所有nginx的配置文件得配两个代理

server {
        listen       8085;
        server_name  localhost;
        charset utf8;
        
        root   D://nginx-1.20.1/distmain;
        location / {
           try_files $uri $uri/ /index.html;   //防止history路由刷新404
           index  index.html;
           location /cbrc/ {
                proxy_pass   http://127.0.0.1/cbrc/;
            }
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       10001;  //子应用的ip及端口
        server_name  localhost;
        charset utf8;
        
        root   D://nginx-1.20.1/distchild1;
        location / {
           try_files $uri $uri/ /index.html;  
           add_header Access-Control-Allow-Origin *;  //配置允许跨域访问
           index  index.html;
           location /cbrc/ {
                proxy_pass http://127.0.0.1/cbrc/;

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

打包后将两个项目的dist分别放置的结构如下