问题：后台管理项目分好多个子项目，代码写在一起过于庞大难以维护。
解决方案：把项目拆成一个一个的小项目，每个项目在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;
}
}
}
效果：
解释原理：
