1.问题概括:
按照这篇文章的做法,用nginx在在服务器同一端口下部署多个项目,结果发现,第一个项目正常运行,第二个项目打开后页面空白。
2.服务器上项目文件夹的结构:
/home 路径下有两个如下的项目文件夹:
MiniProgram-Admin
|--client
|--static
|--index.html
|--server
Vue-mall
其中,MiniProgram-Admin是第二个项目,client是前端项目文件夹(static文件夹下是引用的css和js),server是后端项目文件夹
3.项目文件配置:
项目的路由配置:
const createRouter \= () \=> new Router({
mode: 'history', // require service support
base: process.env.NODE\_ENV \=== 'production' ? '/MiniProgram-Admin/client/index/' : '/index/',
scrollBehavior: () \=> ({ y: 0 }),
routes: constantRoutes
})
项目的 vue.config.js 文件配置
publicPath: process.env.NODE\_ENV \=== 'production' ? '/MiniProgram-Admin/client/' : '/',
4.nginx 文件的配置:
upstream koa.server {
server localhost:3000;
}
server {
listen 80;
location / {
root /home/vue-mall/;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location /admin {
alias /home/MiniProgram-Admin/client;
index index.html index.htm;
try_files $uri $uri/ /MiniProgram-Admin/client/index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
5. 问题:
访问第一个项目(vue-mall),正常;访问第二个项目(
MiniProgram-Admin),页面空白,html结构如下:
并且有一定的机率出现这个报错(之前尝试的时候没有出现过)
不知道是哪里配置错了?而且这个报错也很迷,有时候不出现,但是不管报不报错,页面都是空白的。