如何用Nginx配置Vue.js应用、静态HTML站点及REST API？

你遇到的404错误由Nginx的/app路径配置错误导致，核心问题有2个：

• location /app的路径匹配和alias规则不匹配，且try_files路径参数写为绝对路径，会到全局根目录/usr/share/backend下查找文件，不会命中/usr/lib/App/下的Vue静态资源
• try_files配置没有优先匹配实际存在的静态资源，所有请求直接回退到index.html，导致js、css等静态资源请求无法被正确响应

直接替换Nginx配置中/app对应的location块即可：

location /app/ {
    alias /usr/lib/App/;
    try_files $uri $uri/ /app/index.html;
}

配置说明：

• location /app/ 精确匹配所有/app/开头的请求，避免和其他前缀为app的路径产生匹配歧义
• try_files $uri $uri/ 会优先查找和请求路径对应的真实静态文件，比如请求/app/js/chunk-d9925106.16c4e8be.js时，会到/usr/lib/App/js/目录下查找对应文件，找到后直接返回
• 如果找不到对应物理文件（通常是Vue的history模式前端路由路径），会自动回退到/app/index.html，交给Vue前端路由处理，避免页面刷新出现404

如果修改Nginx配置重启后仍然出现根路径/js/xxx.js的404报错，说明你修改publicPath: '/app/'后没有重新打包Vue项目，执行npm run build重新打包，将新的dist目录内容放到/usr/lib/App/下即可。

内容的提问来源于stack exchange，提问作者Hsn