Come utilizzare vue.js con Nginx?

Voglio costruire una pagina singola applicazione con Vue.js utilizzo di Nginx come il mio webserver e un mio Dropwiward API REST. Inoltre io uso Axios per chiamare la mia richiesta REST.

Il mio nginx config sembra

server {
    listen       80;
    server_name  localhost;

    location /{
        root     path/to/vue.js/Project;
        index    index.html index.htm;
        include  /etc/nginx/mime.types;
    }
    location /api/{
        rewrite ^/api^//$1 break;
        proxy_pass http://localhost:8080/;
    }
}

Attualmente posso solo chiamare il mio localhost/api/path/to/rescource per ottenere le informazioni dal backend.

Ho costruito il Front end con HTML e javascript(vue.js), che ha lavorato finora. Tuttavia, quando si desidera creare una pagina singola applicazione la maggior parte dei tutorial parlare node.js. Come posso usare Nginx, invece?

  • È necessario utilizzare vuerouter se si desidera creare una singola pagina di app con Nginx. Il lato server (nginx) non ha bisogno di tante configurazioni. Basta puntare il root per il tuo file di indice
  • OP avrà bisogno di un catch-all rotta se si utilizza vue-router, però, in modo che gli utenti che accedono foo/bar/whatever non ottenere un 404.
  • Ah, il buon di cattura. Forse try_files $uri $uri/ /$query_string; ?? Io non sono sicuro però
InformationsquelleAutor A.Dumas | 2017-12-05



One Reply
  1. 21

    Aggiungere il codice riportato di seguito per Nginx Config:

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

    il seguente snippet di codice è stato preso da vue-router docs, che è qui.

    Inoltre, è necessario attivare la modalità storia in VueRouter:

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })
    
    • Grazie per il suggerimento penso che anche citato su Github gist qui. Tuttavia è questo un buon modo per andare o c’è anche un modo per utilizzare la vue-cli webpack con nginx, invece?
    • Questa risposta è principalmente per Vue CLI webpack uno ma non funziona con la tua config, se si utilizza Vue router.
    • Se non si utilizza la Vue router, basta usare lo standard nginx config per il codice html.
    • grazie ancora. Non ho capito bene. Posso sviluppare con webpack e vue cli quindi posso eseguire sviluppo webserver con npm run dev ma poi distribuirlo su nginx
    • va bene, provare npm run build e poi c’file di una cartella dist. copiare il contenuto della cartella sul server.
    • Ma è solo una build.js e build.js.map . posso solo aggiungere questo al mio html esistente?
    • Cerchiamo di continuare questa discussione in chat.

Lascia un commento