一、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