如何在Nginx中使用vue.js?

时间:2017-12-05 14:23:00

标签: nginx vue.js

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

我的nginx配置看起来像

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/rescource来获取后端的信息。

我使用HTML和javascript(vue.js)构建前端,到目前为止已经工作了。但是,当我想构建单个页面应用程序时,大多数教程都提到了node.js.我怎样才能使用Nginx?

1 个答案:

答案 0 :(得分:15)

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

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

以下代码段取自vue-router文档,即here

此外,您需要在VueRouter上启用历史记录模式:

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