如何在 Nginx 中使用 vue.js? [英] How to use vue.js with Nginx?

问题描述

我想使用 Vue.js 构建一个单页应用程序，使用 Nginx 作为我的网络服务器和我自己的 Dropwiward REST API.此外，我使用 Axios 来调用我的 REST 请求.

I want to build a single page application with Vue.js using Nginx as my webserver and a my own Dropwiward REST API. Moreover I use Axios to call my REST request.

我的 nginx 配置看起来像

My nginx config looks like

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/;
    }
}

目前我可以调用我的 localhost/api/path/to/resource 从后端获取信息.

Currently I can just call my localhost/api/path/to/rescource to get the the information from the backend.

我用 HTML 和 javascript(vue.js) 构建了前端，到目前为止它已经工作了.然而，当我想构建一个单页应用程序时，大多数教程都提到了 node.js.我该如何改用 Nginx?

I build the Front end with HTML and javascript(vue.js) which has worked so far. However when I want to build a single page application most tutorials mention node.js. How can I use Nginx instead?

推荐答案

将以下代码添加到您的 Nginx 配置中:

Add the following code to your Nginx Config:

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

以下片段摘自 vue-router 文档，这里.

the following snippet has been taken from vue-router docs, which is here.

此外，您需要在 VueRouter 上启用历史模式:

Also, you need to enable history mode on VueRouter:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这篇关于如何在 Nginx 中使用 vue.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！