Vue 网站 Returns "Cannot Get /path" 在除索引之外的所有页面上

Question

我在 Node.js 上使用 Vue 在 AWS EC2 实例上托管我的网站。我没有索引 node.js 文件，只有 vue-router 文件。我使用 AWS CloudFront 将我的证书绑定到我的流量。问题是每次我通过服务器 link 访问该站点时，该站点都运行良好，但每当我通过云端 link 访问该站点时，只会显示该网站的索引。没有 /about 或 /contact；相反，它 returns 无法获取 /about.

我的路由器：

import Vue from 'vue';
import Router from 'vue-router';
import VueCookies from 'vue-cookies';
import Home from './views/Home.vue';
import NotFound from './views/NotFound.vue';


Vue.use(Router);
Vue.use(VueCookies);

VueCookies.config('7d');
VueCookies.set('theme', 'default');
VueCookies.set('unique', Date.now());
VueCookies.set('rwapi-uuid', `v3-${Date.now()}-x9k0`)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'INDEX', component: Home },
    { path: '/about/', name: 'ABOUT', component() { return import('./views/About.vue'); } },
    { path: '/portfolio', name: 'PORTFOLIO', component() { return import('./views/Port.vue'); } },
    { path: '/contact', name: 'CONTACT', component() { return import('./views/Contact.vue'); } },
    { path: '/login', name: 'LOGIN', component() { return import('./views/Login.vue'); } },
    { path: '/404', component: NotFound },
    { path: '*', redirect: '/404' },
  ],
});

我已经尝试将 historyApiFallback: true 添加到我的 webpack 配置中，但没有效果。

Answer 1

根据Vue Router's documentation, when using your router in history mode, your webserver requires additional configuration。

我不太清楚 EC2 实例是如何工作的，但是如果您没有网络服务器将您的所有请求代理到 index.html，Vue-router 将无法处理其他请求。

Vue 网站 Returns "Cannot Get /path" 在除索引之外的所有页面上

Vue Website Returns "Cannot Get /path" On All Pages EXCEPT Index

node.js

vue.js

amazon-ec2

amazon-cloudfront

vue-router