nginx部署vue项目-nginx.conf的配置

这篇文章指导读者停止nginx服务,然后找到nginx.conf配置文件进行修改。主要修改包括设置root目录指向dist文件夹,配置server监听80端口,处理跨域问题以及设定代理到后端服务的proxy_pass。此外,还涉及了错误页面处理和日志记录。
摘要由CSDN通过智能技术生成

修改nginx.conf

停止nginx的运行,否则配置可能不生效!
找到有nginx.conf文件的目录,可以用sudo whereis nginx.conf找到该路径然后进入该目录。
修改nginx.conf,输入如下命令:sudo vim nginx.conf。
如果是首次配置的话,可以直接复制下边的代码,记得要修改root里dist的路径。
如果是之前配置过其它项目的话,只用把http里边包含的 server 复制到文件对应位置就行!

user root;
worker_processes  1

events {
    worker_connections  1024;
}


http {
    include       mime.types;		     #文件扩展名与文件类型映射表
    default_type  application/octet-stream;  #默认文件类型 
    #access_log  logs/access.log  main;	     #日志格式设定
    sendfile        on;			     #支持文件下载   
    #tcp_nopush     on;      #此选项允许或禁止使用socket的TCP
    #keepalive_timeout  0;   #连接保持超时时间,单位是秒
    keepalive_timeout  65
    #gzip  on;			##gzip模块设置,设置是否开启gzip压缩输出

    server {
        listen       80;		 #监听地址及端口
        server_name  www.xyz.com;	 #站点域名,可以有多个,用空格隔开
        #charset utf-8;			 #网页的默认字符集
        #access_log  logs/host.access.log  main;		
        location / {			 #根目录配置
            root   /home/ruoyi/ruoyi-ui/dist; # 路径改成自己的dist路径
            try_files $uri $uri/ /index.html;
            index  index.html index.htm; #默认首页文件名
        }

        location /prod-api/{
                #设置请求头等,防止出现跨域问题
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:8080/; #设置监控后端启动的端口
        }


        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;	#内部错误的反馈页面
        location = /50x.html {		                #错误页面配置
            root   html;
        }
    }
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Nginx部署多个Vue项目,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Nginx。如果尚未安装,请根据你的操作系统的要求进行安装。 2. 在Nginx配置文件夹中创建一个新的配置文件,比如 `/etc/nginx/conf.d`。在该文件夹中创建一个名为 `myproject.conf` 的文件,用于配置你的项目。 3. 打开 `myproject.conf` 文件,并输入以下内容: ``` server { listen 80; server_name your_domain.com; // 替换为你的域名或IP地址 location /project1 { alias /path/to/project1/dist; // 替换为第一个Vue项目的dist目录路径 try_files $uri $uri/ /project1/index.html; } location /project2 { alias /path/to/project2/dist; // 替换为第二个Vue项目的dist目录路径 try_files $uri $uri/ /project2/index.html; } // 可以继续添加其他项目配置 error_page 404 /index.html; } ``` 上述配置中,我们使用了 `alias` 指令将每个项目的 `dist` 目录映射到对应的路径。`try_files` 指令用于处理路由请求,确保能够正确访问到每个Vue项目的路由。 4. 保存并关闭文件。 5. 检查配置文件是否存在语法错误:执行 `nginx -t` 命令。 6. 如果没有错误,重新加载Nginx配置文件:执行 `sudo service nginx reload`(根据你的操作系统和Nginx安装方式可能会有所不同)。 7. 确保你的域名或IP地址正确解析到服务器,并尝试访问 `http://your_domain.com/project1` 和 `http://your_domain.com/project2`,应该能够分别访问到两个Vue项目。 按照上述步骤,你可以配置Nginx部署多个Vue项目。你可以根据需要添加更多的项目配置。在配置完成后,确保每个项目的 `dist` 目录已经构建并位于正确的路径上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值