【问题标题】:Vue-router and dynamic routes nginxVue-router 和动态路由 nginx
【发布时间】:2020-07-19 18:34:03
【问题描述】:

我一直在使用运行良好的历史模式并使用简单的 nginx。我现在添加了动态路由,以便当用户键入 baseurl.com/microcosm/anynametheywant - 这会将它们连接到在本地开发中非常有用的空间,但是当我移动到服务器时,我从中得到 404,我尝试了一个数字这里的东西是当前的 nginx,router/index.js - 仍然无法正常工作并且仍然返回服务器 404,甚至组件帮助都没有得到赞赏

NGINX 文件原样

server {
    listen 111.111.11.111:80;
    server_name *.nodenogg.in;

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

location @rewrites {
  rewrite ^(.)$ /index.html last;
}

location ~ /microcosm/\d+$ {
   try_files $uri $uri/ /index.html;
}

}

路由器/index.js

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  // dynamic segement `:microcosm` is added to the path
  {
    path: '/microcosm/:microcosm',
    component: Home
  },
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }

]
const router = new VueRouter({
  mode: 'history',
  base:   base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/',
  routes
})

export default router

抓取和使用 Router.currentRoute.params.microcosm

【问题讨论】:

  • 您是否在“baseurl.com/microcosm”收到空白页或 404? (默认/路由)
  • 我的服务器 404 连我的组件都没有
  • 显示的 Nginx 配置中没有设置根路径,这可能是它找不到 index.html 的原因
  • 你能提供更多细节吗?正如我已经尝试过 root /var/www/vhosts/nodenogg.in/alpha.nodenogg.in;
  • 可以很好地浏览它,但当我手动尝试访问动态路由 /microcosm/dynamicname 时,我在真实服务器上构建时得到 404,但它在 localhost 上运行良好

标签: vue.js nginx dynamic vue-router router


【解决方案1】:

事实证明,首先我需要添加到我的自定义 nginx 的底部,当然我需要在 443 上监听,所以它从未被听到,我什至不需要别名的东西,因为我希望它是一个404,现在它是我的自定义一个!最后然后删除 *.nodenogg.in 真是一个错误,花了我几个小时!

server {

  listen 111.111.11.111:443 ssl;
  server_name alpha.nodenogg.in ssl;
  root /var/www/vhosts/nodenogg.in/alpha.nodenogg.in;

  ssl_certificate /location/ofthekey/cert.pem;
  ssl_certificate_key /location/ofthekey/privkey.pem;
  ssl_protocols SSLv3;

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

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2019-10-21
  • 1970-01-01
  • 2020-09-15
  • 1970-01-01
  • 2019-09-29
  • 1970-01-01
  • 2020-04-11
  • 1970-01-01
相关资源
最近更新 更多