一、 问题背景

Vue.js应用在部署到nginx非根目录下时常常会遇到访问404错误的问题。这是由于Vue.js的路由配置与nginx的配置不匹配弄得的。

二、原因琢磨

1. Vue.js的URL与nginx的server配置不匹配。

2. Vue.js的路由配置中没有正确设置base。

3. nginx的location配置没有正确设置alias。

三、 解决方案

1. 修改Vue.js路由配置

在Vue.js项目中，找到router/index.js文件，修改router的base配置，使其与nginx的非根目录匹配。

const router = new VueRouter({
    mode: 'history',
    base: '/your_sub_directory/', // 设置为nginx的非根目录
    routes
});

2. 修改nginx配置

在nginx的配置文件中， 找到location配置，添加alias指令，使其指向Vue.js应用的静态材料目录。

location /your_sub_directory/ {
    alias /usr/share/nginx/html/sub_directory/;
    try_files $uri $uri/ /your_sub_directory/index.html;
}

3. 修改Vue.js打包配置

在vue.config.js文件中，设置publicPath为nginx的非根目录。

module.exports = {
    publicPath: '/your_sub_directory/'
}

通过以上步骤，能解决Vue.js应用在nginx非根目录下部署时出现的404错误问题。需要注意的是具体的配置参数兴许因项目而异，需要根据实际情况进行调整。

五、 预测与验证

预计在正确配置后Vue.js应用在nginx非根目录下将不再出现404错误。欢迎您用实际体验验证这一观点。