nginx部署多vue项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了nginx部署多vue项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1435字，纯文字阅读大概需要3分钟。

内容图文

nginx部署vue打完的zip包步骤

1.如果单vue项目的话，只需要配置root就行，但业务上一般会多项目同时部署，所以需要加一些配置。
2.我也是配合安全测试时部署项目遇到的问题，所以分享出来，希望大家学到一点东西，避坑。废话不多说，上才艺。
3.nginx下载地址，尽量选择Stable version(稳定版)
4.具体的linux安装nginx步骤，可以参考linux安装nginx完整步骤
5.单项目部署的话只需要:

	server {
		listen 80;
		server_name  localhost;
		...
		location / {
	       root  /usr/web/dist;
	       try_files $uri $uri/ /index.html;
	       index  index.html index.htm;
		}
	}

6.当部署多项目时就需要有修改的地方了，这个修改不仅仅是修改nginx.conf,还需要在前端项目打包的过程中添加配置:

   1.nginx.conf的修改:      
	server {
		listen 80;
		server_name  localhost;
		...
		location / {
	       root  /usr/web/dist;
	       try_files $uri $uri/ /index.html;
	       index  index.html index.htm;
		}
		location /api {
	       alias  /usr/web/api/dist;
	       try_files $uri $uri/ /api/index.html;
	       index  index.html index.htm;
		}
	}
	2.前端项目打包过程中，路由中配置增加base属性:   
	  位置:src/router/index.js   
	  新增代码: base:'api',       
	  大致配置为:  
	  const RouterConfig = {
            mode: 'history',  
            base: 'api', 
            routes: routers
      }
     3.修改引用static文件夹中的图片地址:   
        1.写在img中的地址,将/static改为@/../static     
        2.以backgroud形式引入的图片,将/static改为../../static        

7.细心的大伙已经发现了吧，very easy，切记nginx里只能有一个root，alias可以有多个，当配置多目录的时候,location /xxx 后边写什么,try_files 后也要加xxx。嗯，目前大概就是这样了，下次写一下微服务下网关配合nginx，实现负载均衡的配置
8.谢谢大家

内容总结

以上是互联网集市为您收集整理的nginx部署多vue项目全部内容，希望文章能够帮你解决nginx部署多vue项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---