Vue Nginx 发布部署

最新推荐文章于 2025-08-04 18:07:28 发布

原创最新推荐文章于 2025-08-04 18:07:28 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nginx

Vue 基础学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Windows上安装部署Nginx，并配置Vue项目的静态资源服务。首先，通过`npm run build`生成Vue应用的dist文件夹，然后将dist内容复制到Nginx的html目录下。接着，编辑Nginx的配置文件`nginx.conf`，设置监听8088端口，并指定dist文件夹为静态文件根目录。最后，访问`http://localhost:8088`即可查看运行效果。

安装部署Nginx：Nginx windows 安装部署
编译Vue程序：npm run build
生成dist文件夹里面的文件如下：
将dist文件夹拷贝到：D:\nginx-1.18.0\html目录下面

配置：D:\nginx-1.18.0\conf\nginx.conf文件


worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8088;//配置访问端口
        server_name  localhost;

 	    location / {
            //配置文件路径
            root   D:/nginx-1.18.0/html/dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}