vue - 项目部署到 nginx中

最新推荐文章于 2025-10-09 08:29:51 发布

原创最新推荐文章于 2025-10-09 08:29:51 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端知识 - Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何将Vue项目通过Nginx进行部署，包括服务器配置、Nginx配置、接口与WebSocket支持、静态文件配置及Vue项目请求配置。同时，提供从构建到部署的完整流程。

Web学习笔记

一、vue项目部署到nginx

确定服务器ip地址,和端口地址
a. ip:123.123.123.123
b. nginx监听的端口:8085
c. 服务部署端口:8125

编写nginx的配置文件
a. 注意监听的端口是8085
b. 服务接口与websocket的支持配置
#接口
location ^~ /api {
proxy_pass http://127.0.0.1:8125;

			#websocket支持配置
			proxy_http_version 1.1;  
			proxy_set_header Upgrade $http_upgrade;  
			proxy_set_header Connection "Upgrade";
			proxy_read_timeout 7200;#必须设置很长时间，否则断掉		
		}

c. 静态文件的配置
#静态文件
location ^~ /files{
add_header Access-Control-Allow-Origin *;
alias C:\Project\systemFiles;
autoindex off;
}

d. 完整配置如下
#user nobody;
worker_processes 1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8085;
        server_name  127.0.0.1;

		#页面 放在 D:\DevelopmentService\nginx\vue\nginx-1.16.1\html文件夹中
        location / {
            root   html;
            index  index.html index.htm;
        }
		
		#接口
		location ^~ /api {
			proxy_pass http://127.0.0.1:8125;
			
			#websocket支持配置
			proxy_http_version 1.1;  
			proxy_set_header Upgrade $http_upgrade;  
			proxy_set_header Connection "Upgrade";
			proxy_read_timeout 7200;#必须设置很长时间，否则断掉		
		}
		
		#静态文件
		location ^~ /files{
			add_header Access-Control-Allow-Origin *;
			alias C:\Project\systemFiles;
			autoindex off;
		}
    }
}

接口服务application.yml的名称配置
#端口和访问路径配置
server:
port: 8125
servlet:
context-path: /api

vue项目request.js的请求配置
a. baseURL的地址 = 服务器的ip + nginx的监听访问端口
import axios from ‘axios’;

const request = axios.create({
    baseURL: 'http://123.123.123.123:8085',//服务器配置 - 必须改为
    withCredentials: false,
    timeout: 120 * 1000,
});

export default request;