时间戳

首页 > 解决方案 > 带有 nginx 重定向的 VueJS 不起作用并返回 200 和空白页

vue.js - 带有 nginx 重定向的 VueJS 不起作用并返回 200 和空白页

问题描述

我将具有历史模式的 VueJS SPA 上传到使用 nginx 的测试服务器。常规方法是在您的 nginx 配置文件中编写这些行：

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

但是我尝试了，在我尝试访问一些虚拟 URL 后，它并没有按预期将我重定向回我的index.html文件，而是显示一个带有状态代码 200 的空白页面。我想将用户重定向到 index.html。

只想提一下，每次进行更改时我都会重新启动服务器。

这是我的一些文件：名称：“default”（nginx config），特别是与项目有关的部分

server {
    listen 80;
    root /var/www/html/ux-assessment/dist;
    index index.html;
    server_name 9a6bc157c174d32178c0e3b92b963394.p4m-dev.com;

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

router.js 文件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ThankYouModal from './components/ThankYouModal.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'thank-you',
          component: ThankYouModal,
          name: 'thankYouModal'
        }
      ]
    },
  ]
})

因此，如果您尝试转到9a6bc157c174d32178c0e3b92b963394.p4m-dev.com/foo它应该将您重定向到index.html但它不会并停留在/foo代码状态为 200 和空白页面的子页面上。该页面是实时的，因此您可以尝试并查看inspector => network。

我还尝试了另一种方法，但没有任何效果。有任何想法吗？谢谢！

标签： vue.jsnginxvue-router

解决方案

推荐阅读