我想用Vue构建一个单页应用程序.js使用Nginx作为我的Web服务器和我自己的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?

推荐答案

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

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

以下代码片段取自vue router docs,即here.

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

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

Vue.js相关问答推荐

为什么v-show需要组件的包装元素?

Vue 2 如何在全局函数中返回观察者

v-slot: activator 中 {attrs} 参数的作用是什么?

两个div元素之间的vue2过渡

如何从mustache内的过滤器输出html

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

如何使用带有自定义标签和类的`transition-group`

VueJS:向左,元素的顶部位置?

v-model 不会检测到 jQuery 触发事件所做的更改

Vue 3 - 带有全局组件的无法解析组件

Vuetify 单选按钮未显示为选中状态

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

如何更改 Vuetify 日历日期格式

Vue.js 拦截器

$set 不是函数

从子组件 Vue 更新父模型

组件已注册但未使用 vue/no-unused-components

vue 未在实例上定义,但在渲染期间引用

使用 svelte js 的原因

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误