Question

假设我有一个vuejs网络应用：www.example.com。它使用vue-router，因此有一堆预定义的路由：example.com/signin、/signup、/dashboard（当用户登录时），如果路由，还有*路由重定向到/ 404找不到：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/signup',
      name: 'signup',
      component: () => import('@/views/SignIn.vue')
    },
    {
      path: '/signin',
      name: 'signin',
      component: () => import('@/views/SignIn.vue')
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: () => import('@/views/Dashboard.vue'),
      beforeEnter: requireAuth
    },
    {
      path: '/404',
      name: '404',
      component: () => import('@/views/NotFound.vue')
    },
    {
      path: '*',
      redirect: '/404'
    }
  ]
})

同一网站（www.example.com）也将提供API（即www.example.com/api/some-end-point）。有没有一种方法可以在vue-router中配置为将用户发送到应用之外，而不是重定向到/ 404？

Answer 1

这取决于您是处于开发模式还是生产版本。在开发模式下，您可以添加或创建vue.config.js的{{1}}添加配置。您可以将devServer代理到devServer。假设您正在端口api上运行NodeJS或PHP应用程序，则可以将以下内容添加到3000中。在vue.config.js的此设置中，您的npm run serve将路由到您的api。

http://localhost:8080/api

如果您处于生产模式，则可能需要module.exports = { devServer: { host: '0.0.0.0', port: 8080, https: false, hotOnly: true, proxy: { '/api': { target: 'http://localhost:3000' } } }, }的网络服务器，例如NGINX。例如，在Nginx中，您需要通过代理将apache位置与api分开，其余部分与vue文件分开。下面是一个例子

/api

服务器处理了不相关的vuejs应用路由？

1 个答案: