从publicPath路由更改时部署到子目录的Vue应用程序问题

Question

我们有一个Vue应用程序，我们正在部署到一个子目录: /deploypath/

现在，我们将vue.config.js作为：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production'
    ? '/deploypath/'
    : '/',
  transpileDependencies: [
    'vuetify'
  ]
}) 

下面是正在发生的事情:在index.js (路由器)中，我配置了多条路径以返回多个视图和组件。当用户登录时，他们可以访问其他页面。当它们没有登录时，它们被重定向到一个(登陆页)。

我定义了多条路线：

const routes = [
      {
        
        path: '/deploypath',
        name: 'feature1',
        component: FeatureOneView,
        meta: {
          title: 'Feature One',
        }
      },
      {
        
        path: '/deploypath/notloggedin',
        name: 'notloggedin',
        component: NotLoggedInView,
        meta: {
          title: 'Landing',
        }
      }
    ]

const router = new VueRouter({
  mode: 'history', 
  routes: routes 
}); 

现在，我遇到的问题是(在部署生产构建之后)，当我访问/deploypath时，它是工作的，但是任何其他路径(例如/deploypath/notloggedin)都不能工作。我们有一个使用nginx运行的Ubuntu实例。

我们是在Vue配置上做错了什么，还是在nginx端出现了问题？

Answer 1

为了防止它对任何人有帮助，我的一个好朋友帮我找到了一个解决方案：

cd /etc/nginx/sites-available

然后：

sudo vim <insert your site's conf file here> 

然后按"i“编辑，并在顶级server { ... }部分中粘贴(将"dirname”替换为承载Vue应用程序的子目录的名称)：

location ^~ /dirname {
               try_files $uri /dirname/index.html =400;
        }

然后按键盘上的转义(esc)键，然后键入":wq“，然后按enter键保存。然后跑：

sudo service nginx restart

然后刷新您的浏览器窗口，希望您看到您的Vue应用程序！