vue 打包后 nginx 请求映射

最新推荐文章于 2025-03-07 22:25:57 发布

原创最新推荐文章于 2025-03-07 22:25:57 发布 · 568 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nginx

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何通过Nginx正确部署Vue项目。包括配置Nginx以支持Vue单页应用，实现静态资源托管及API代理等内容。

vue项目配置打包后，设置的 devServer 失效，需要使用 nginx 来映射地址

安装环境 nginx

将打包后的 dist 文件放到 nginx 目录下的 html 中

在 nginx 目录下 conf/nginx.conf 进行配置

server {
	# 监听端口号
    listen       8888;
	
	# 访问地址
    server_name  localhost;
    
    location / {
		
		# 文件入口
        root   html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
	
	# 映射接口地址
    location /api {
        proxy_pass http://localhost:5000/;
    }
   }

启动命令（在nginx目录下输入）
start nginx

输入地址 localhost:8888 就能打开了