nginx部署多vue项目

最新推荐文章于 2024-04-02 16:50:11 发布

沉迷于搬砖的一个憨憨

最新推荐文章于 2024-04-02 16:50:11 发布

阅读量354

点赞数

分类专栏： nginx vue 文章标签： nginx

本文链接：https://blog.csdn.net/lxsFight/article/details/116298069

版权

nginx 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Nginx部署Vue多项目，包括修改nginx.conf配置，设置location，前端项目打包时的base配置以及静态资源路径调整。通过实例分享，帮助读者避坑，轻松完成多项目部署。

摘要由CSDN通过智能技术生成

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.谢谢大家