利用Nginx部署多个Vue项目

Posted on

最近在公司帮忙孵化一个项目，有一个PC端的Web用户系统以及一些手机端的页面，本着PC和手机分离的原则，我用vue-cli起了两个SPA项目开始了愉快的coding过程，但是coding完了在部署的时候却遇到了难题，因为没有申请多的域名，只有一个可以使用的二级域名，但是有两个vue项目，合到一起又会有许多兼容性问题，所以在想能不能实现通过域名后面输入不同的目录进入不同的项目的效果

Nginx 配置

1
2
3
4
5
6
7
8
9
10
11
12
server {
    listen       8000;
    server_name       192.168.11.16; //你的ip或域名
access_log  logs/8000access.log;
    location / {
     try_files $uri $uri/ /index.html;
    	root   /app/web/dist/;
    }
location /wap { //注意此处 关键！！！
root   /app/web/dist;
            try_files $uri $uri/ /wap/index.html;
    }

vue项目配置

两个项目分别是PC以及wap

1、修改wap项目的vue配置文件

我所使用的是vue-cli3，在vue.config.js 中增加

1
2
publicPath: '/wap/', //方便调试
outputDir: 'wap', //修改打包输出目录

这里wap是我所使用的路由，你也可以根据你的情况进行相应的修改
参考链接：
https://cli.vuejs.org/zh/config/#publicpath
https://cli.vuejs.org/zh/config/#outputdir

2、修改wap项目router的base

1
2
3
4
5
const router = new Router({
  mode: 'history',
  base: '/wap/', //这里做修改
  routes
})

3、对两个项目分别打包

将wap项目生成的wap的文件夹放入PC项目打包生成的dist文件夹中，压缩上传部署重启nginx

这样访问http://192.168.11.16:8000就是PC端的页面，访问[http://192.168.11.16:8000](http://192.168.11.16:8000)/wap 就是手机端（另一个vue项目）的页面了

需要注意的点：

1.最好使用history模式
2.PC项目的vue-router不要对wap进行操作