直接在浏览器中访问 url 时 vue-router 不起作用 - 404 错误答案

【问题标题】：vue-router not working when accessed url directly in a browser - 404 error直接在浏览器中访问 url 时 vue-router 不起作用 - 404 错误
【发布时间】：2020-10-05 00:00:29
【问题描述】：

我将vue-router 设置为历史模式以摆脱#。进行此更改后，每次我在浏览器中访问我的应用程序的 url（例如http://myapp/verify_account）时，我的应用程序都会引发 404 错误。但是，当访问相同的 url 表单登陆页面时（当 vue-router 已经加载时）它可以工作。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Verify from '@/views/Verify.vue'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      name: 'Home',
      path: '/',
      component: Home
    },
    {
      name: 'Verify',
      path: '/verify_account',
      component: Verify
    }
  ]
})

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

事实证明，我必须在我的 nginx 配置中添加一些指令才能正确解析我的路由。基本上，我在阅读 vue-router 文档中的HTML5 History Mode 部分后，将try_files $uri $uri/ /index.html; 指令添加到了我的nginx.conf 文件中。

my_app.nginx.conf

server {
  listen 80;
  listen [::]:80 default_server;

  server_name _;

  charset utf-8;

  root /usr/share/nginx/html;

  index index.html index.htm;

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

取决于您的应用程序是由 nginx、apache 还是 node.js 提供服务，请查看this examples 以获得灵感。

【讨论】：