Nginx一个端口部署多个vue项目

1,262 阅读1分钟

由于公司服务器前两天被攻击,阿里云服务器直接把公司服务器给关停了,刚好上面没有什么特别重要的数据,就直接格式化了,之前部署的好几个演示版本项目,是监听多个端口来部署的,本次上级只让开一个端口部署,所以研究了半天,记录下成果。

  • 环境 vue2.x
    vue-cli 4.4.6
    vue-router 3.1.3

  • 配置vue.config.js文件 配置publicPath
    image.png
    对应后面nginx路径,这里添加的目的是其他静态资源文件统一前缀路径

  • 修改路由配置 image.png
    注意这个 和上面的一致,为nginx location路径, 也就是请求路径

    上面两项修改好之后,在本地npm run serve把项目跑起来试试,如果不报错,则可进行打包

  • 上传文件到服务器 我是使用WinSCP上传文件到服务器的 /opt/smartplatforms 目录下
    记住这个文件夹路径,后面nginx的代理路径会指向这里

  • nginx文件配置

     此处就对不对nginx的安装做说明了,请自行百度
    

修改服务器上的nginx.conf文件, image.png
修改完成后执行nginx -t检查是否有语法错误,没有的话执行 nginx -s reload重启nginx服务
http://localhost:8081/csgl/
http://localhost:8081/xtld/
... 就可以分别指向不同的项目了