nginx端口映射

问题：后台管理项目分好多个子项目，代码写在一起过于庞大难以维护。
解决方案：把项目拆成一个一个的小项目，每个项目在nginx中进行端口映射，在开发环境配置页面路由，公共页面展示区域的页面地址经过端口映射以后进行展示。

注意：公共页面展示区域用iframe标签解决跨域问题。

首页项目index
子项目test

index项目中
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: '/index'
    },
    {
        path: '/index',
        name: 'index',
        component: () => import('../views/index.vue'),

    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

view/index.vue

<template>
  <div>
    <h1>我是iframe</h1>
    <div>
      <div style="font-size: 25px">不代理</div>
      <iframe
        :src="url1"
        frameborder="0"
        style="width: 800px; height: 200px; background-color: red"
      ></iframe>
    </div>
    <div>
      <div style="font-size: 25px">代理</div>
      <iframe
        :src="url2"
        frameborder="0"
        style="width: 800px; height: 200px; background-color: red"
      ></iframe>
    </div>

    <h1>不代理:{{ url1 }}</h1>
    <h1>代理:{{ url2 }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url1: "",
      url2: "",
    };
  },
  mounted() {
    this.url1 = "http://localhost:8082/test";
    this.url2 = location.protocol + "//" + location.host + "/test";
    console.log(this.url2, "this.url2");
  },
};
</script>

<style lang="scss" scoped></style>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue.config.js

module.exports = {
    devServer: {
        //     // 设置主机地址
        host: 'localhost',
        //     // 设置默认端口
        port: 9000,
        open: false,//项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开

    },
    lintOnSave: true,

    publicPath: './',

    assetsDir: './',

    productionSourceMap: false,

}

子项目test

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/test'
  },
  {
    path: '/test',
    name: 'index',
    component: () => import('../views/Home.vue'),
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

view/Home.vue

<template>
  <div class="home">
    <h1>我是home页</h1>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue.config.js

module.exports = {
    devServer: {
        //     // 设置主机地址
        host: 'localhost',
        //     // 设置默认端口
        port: 8082,
        open: false,//项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开

    },
    lintOnSave: true,

    publicPath: './',
   
    assetsDir: './',

    productionSourceMap: false,
  
}

nginx.config.js

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
           proxy_pass http://localhost:9001/;
		   proxy_set_header Host  $host;
           proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
           proxy_set_header X-Real-IP  $remote_addr;
        }
        location /test/ {
           proxy_pass http://localhost:8082/;
		   proxy_set_header Host  $host;
           proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
           proxy_set_header X-Real-IP  $remote_addr;
        }
      
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }  
}

效果：

解释原理：