如何在 Nginx 中使用 vue.js？

Question

我想用 Vue.js 构建一个单页应用程序，使用 Nginx 作为我的网络服务器和我自己的 Dropwiward REST API。此外，我使用 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？

原文由 A.Dumas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将以下代码添加到您的 Nginx 配置中，详见 VueRouter 文档， 此处：

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

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

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

原文由 Daksh M. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在同样的问题上苦苦挣扎。但我发现我该怎么办。您只需将其添加到您的 nginx.conf 中。

 location / {
    root /home/admin/web/domain.com/public_html/;  #-> index.html location
    index index.html;
    include  /etc/nginx/mime.types;
    try_files $uri $uri/ /index.html;
}

原文由 SefaUn 发布，翻译遵循 CC BY-SA 4.0 许可协议