Несвязанный маршрут приложения vuejs, обрабатываемый сервером? - PullRequest
Новая
       5

Несвязанный маршрут приложения vuejs, обрабатываемый сервером?

0 голосов
/ 20 октября 2018

Допустим, у меня есть веб-приложение 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?

1 Ответ

0 голосов
/ 20 октября 2018

Это будет зависеть, если вы находитесь в режиме разработки или в производственной сборке.В режиме разработки вы можете добавить или создать vue.config.js add config devServer.devServer вы можете прокси для вашего api.Допустим, у вас запущено приложение NodeJS или PHP на порту 3000, к которому вы можете добавить следующее: vue.config.js.В этой настройке для npm run serve ваш http://localhost:8080/api будет маршрутизировать к вашему API. 

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000'
      }
    }
  },
}

Если вы находитесь в производственном режиме, вам, вероятно, понадобится веб-сервер, такой как NGINX для apache.Например, в Nginx вам нужно будет разделить местоположение /api для вашего API через прокси, а остальное - для ваших файлов VUE.Пример ниже 

...
      location /api {
            proxy_pass         http://myapi:3000;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
            expires off;
            access_log off;
            if_modified_since off;
            add_header Last-Modified $date_gmt;
            add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
            proxy_no_cache 1;
        }

        location / {
            try_files /path/to/my/vue/build/files /;
        }
...
...