Vue部署到Nginx上及问题解决

一、Vue打包

dist文件即打包文件

二、下载Nginx，将dist内容全部复制到Nginx的html下

三、修改Nginx的nginx.conf配置文件，添加try_files $uri $uri/ /index.html;

 

 

try_files $uri $uri/ /index.html; 是 Nginx 配置中的一个重要指令，用于处理前端路由（如单页应用 SPA 的路由）和静态文件请求。它的作用是按顺序检查文件是否存在，并返回第一个找到的文件。如果所有文件都不存在，则返回最后一个参数指定的文件。

这行配置是实现单页应用（如 React、Vue）路由的关键，确保所有前端路由请求都能正确返回 index.html，同时不影响静态资源的正常加载。

四、注意事项：

刷新页面显示404，需添加try_files语句

#彻底重启Nginx（Windows）taskkill /f /im nginx.exe#进入Nginx目录下start nginx