用nginx部署多个Vue项目

自己做的移动端,其他人做的pc端,要求部署到一起,个人研究了一下午,参考各路大神方案,做了一个,如有错误,请指正。 

  1. 下载nginx压缩包并解压;
  2. 将准备好的多个项目进行打包;打包后将dist下的index.html和static文件复制到nginx文件下的html中;将第二个项目的打包文件放置在html下新文件下,如:dh; 我在本次中将html原有的两个文件删除掉了;多个项目依次增加。用nginx部署多个Vue项目_第1张图片
  3. 进行第二个项目的配置:在打包第二个文件时需要在config\index.js文件中的build:{}中修改assetsPublicPath:’/此处为第2步中新建的文件夹名/’, 用nginx部署多个Vue项目_第2张图片
  4. 在第二个项目src/router/index.js中修改router用nginx部署多个Vue项目_第3张图片
  5. 在nginx中的配置:在conf/nginx.conf中修改server{},
Location / {

      root   html;

      try_files  $uri $uri/ @router;

      index  index.html  index.html;

}

     

Location  /dh/{

      root   html/html;

      try_files  $uri $uri/ @router;

      index  index.html  index.html;

}



Location @router {

      Rewrite ^.*$  /index.html  last;

}

用nginx部署多个Vue项目_第4张图片

6.启动nginx并重新运行

用nginx部署多个Vue项目_第5张图片

7.在浏览器中输入localhost:端口号   (此处端口号指的是conf/nginx.conf中修改server{}的端口号)  即可访问第一个项目,输入localhost:端口号/第二项目的文件夹名   即可访问第二个项目

eg:localhost:80   
eg:localhost:80/dh

你可能感兴趣的:(记忆)