前端微服务架构1-项目启动及打包部署-526互联

启动

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

关于一起启动

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分别放置的结构如下