前端----Nginx不会用？这一篇就够了！_1. 打包前端项目,并且配置nginx,通过nginx能够正常访问前端界面。-CSDN博客

本文链接：https://blog.csdn.net/lxt135744/article/details/136920023

本文详细介绍了如何使用Nginx打包并部署Vue项目，包括处理样式问题、配置接口代理、启动Nginx服务以及解决访问问题。最后展示了如何配置Nginx以让他人通过指定IP地址访问网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Nginx：项目打包部署--也就是项目上线，别人可以访问你的网站

一、先去打包项目

首先:敲npm run build

dist文件内部长这样

html文件可以用liveserver打开

但是发现页面没有样式【但是的确能打开页面】

这个是因为接口代理在vue.config文件中，接口没有通，所以没有页面暂且没有显示--莫慌！！！

二、去官网下载

nginx：下载https://nginx.org/en/download.html

解压

然后在这个目录敲cmd

回车

敲：ng+tab自动补全

回车：如果没有任何回复，说明启动成功了！！

去任务管理器查看，有这个说明就成功了！！！

然后将dist文件夹复制到桌面

改名

三、配置nginx

用vscode打开，找到server

粘贴以下内容

# location后的字符串，表示要匹配地址的path。
# 通常设置为项目名。
location /wangyiyun {
    # alias后的字符串，表示要映射的文件夹。
    # 修改为打包后【文件夹】所在路径即可。
    alias F:/Desktop/wangyiyun/dist/;

    # index后的字符串，表示要映射的默认文件。
    # 注意:此项直接复制使用，无序更改。
    index index.html index.htm;
}

到server中去！！