vue-module, nginx 및 직접 링크

vue-module, nginx 및 직접 링크

nginx 서버에 vue-router를 설정하려고 합니다.브라우저에 직접 url을 입력하면 루트가 작동하지 않는 문제가 발생하고 있습니다.myapp.com/mypath.

vue 라우터 문서에 기재되어 있는 서버 설정 및 스택오버플로우에서 권장되는 유사한 설정을 시험해 보았습니다.현재 nginx 로케이션 설정은 다음과 같습니다.

location / {
    try_files $uri $uri/ /index.html;
}

location /subscribe {
    proxy_pass http://127.0.0.1/subscribe // express API app
}

루트 컴포넌트(패스:/)이 아니고,/mypath말이 되네.location인덱스 파일에만 리다이렉트 되는 것 같습니다.의 직접 링크를 리다이렉트하려면 어떻게 해야 합니까?myapp.com/mypath로./mypath내 VueJS 앱에서 경로를 지정하시겠습니까?

현재 vue 경로 설정 방법은 다음과 같습니다.

...
const routes = [
    { path: '/', component: Landing },
    { path: '/mypath', component: MyPath }
];

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

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

나는 같은 문제를 풀려고 몇 시간 동안 애를 먹었다.이 모든 설정이 유효합니다.

events {
...
  http {
  ...
    server {
          listen       80;
          server_name  localhost;

          location / {
              root   /path/to/your/project/html;
              index  index.html index.htm;
              include  /etc/nginx/mime.types;
              try_files $uri $uri/ /index.html;
          }
    }
  }
}

저는 당신과 거의 같은 라우터 설정을 가지고 있습니다.

저는 동료의 제안으로 가능한 해결책을 하나 찾았습니다.

이제 URI를 nginx의 쿼리 파라미터로 전달합니다.이 시점에서 설정은 다음과 같습니다.

location / {
    try_files $uri $uri/ /index.html?uri=$uri
}

다음으로 VueJ의 라우터 설정에서 다음을 수행합니다.

const routes = [
{
    path: '/',
    component: Landing,
    beforeEnter: (to, from, next) => {
        const { uri } = to.query;
        if (uri != null && uri != '/') {
            next(false);
            router.push(uri);
        } else {
            next();
        }
    }
}, ...

이것은 약간 수상해 보이지만 효과가 있는 것 같다.

1. 접속처: /etc/nginx/sites 지원

2. 도메인에 대한 구성을 엽니다.

3. 'root' 아래에 다음 코드를 추가합니다.

   location / {
     try_files $uri $uri/ /index.html;
   }
   

4. 파일을 저장하다

5. 다음 명령을 사용하여 nginx 서버를 재시작합니다./etc/init.d/nginx restart

6. 브라우저 새로 고침

vue.conf 및 nginx에서 커스텀 퍼블릭 패스(mypath)를 사용하고 있습니까?

이 경우 해당 경로에 일치하도록 설정을 변경해야 합니다.

location /mypath {
    try_files $uri $uri/mypath /mypath/index.html
}

저도 같은 문제가 있어서 404개마다 root url로 리다이렉트를 해봤는데 완벽하게 동작합니다.

1. 접속처: /etc/nginx/sites 지원

2. 기본 구성 파일 열기

3. 404 리다이렉트 위치 앞에 다음 행을 추가합니다.

   error_page 404 /;

파일을 저장하고 nginx를 재시작하는 것을 잊지 마십시오.

vue-router 설명서에 제시된 대로 다음 행을 사용하는 것이 좋습니다.단, nginx 서버를 설정하는 파일이 여러 개 있는 경우(예를 들어 서버의 SSL을 설정하는 파일)에는 반드시 포함시켜 주십시오.

location / {
  try_files $uri $uri/ /index.html;
}

언급URL : https://stackoverflow.com/questions/49072584/vue-router-nginx-and-direct-link