nginx代理vue项目，将项目部署于非nginx根目录时，项目路径未设置的出错分析

本文记录了一位开发者在使用VueCLI4.x构建的前端项目部署到服务器后遇到的访问问题。问题表现为JavaScript未启用导致页面无法正常工作，且静态资源如CSS文件找不到。分析发现，问题源于项目路径设置错误，实际指向了nginx的根目录而非项目目录。解决方案在于调整Vue项目中的publicPath，将其设置为服务器上项目实际的路径。通过修改publicPath为服务器代理的路径，成功解决了资源找不到的问题，使得项目能够正常运行。

vue cli 4.x 构建的前端项目在本地调试无问题，但部署到服务器后，无法正常访问。
网上很多说
“问题出在vue项目中，在router文件夹的index.js文件中，将mode修改为hash模式即可，如果使用的是history，那么需要后端进行配置。”
这里说下我的解决过程

一、部署到服务器出错

“We’re sorry but project-name doesn’t work properly without JavaScript enabled. Please enable it to continue.”
在这里插入图片描述

在这里插入图片描述

二、错因分析

可以发现，项目打包后的js,css文件都找不到了。CDN导入的script都成功加载了。
在这里插入图片描述
nginx代理并无问题，能找到项目

看看404的css文件，请求链接明显不对，正确的URL应该是：http://域名/myvuetb/css/app.49371614.css才对。

项目的根目录出错了，它取的是nginx的根目录，而非为该项目配置的目录：
在这里插入图片描述

三、解决

关于项目路径的问题，vue官网 - publicpath已经说的很明白了。
就不加工传述了：
在这里插入图片描述

四、项目路径设置

项目路径并不是指服务器的路径，如下所示，将路径设为/projects/notes/myvuetb/
在这里插入图片描述

module.exports = {
	publicPath: process.env.NODE_ENV === 'production'
    ? '/projects/notes/myvuetb/'
    : '/'
}

该URL nginx无法解析，需要更改为nginx代理的路径/myvuetb/
在这里插入图片描述
这样就不会找不到项目位置了。