Vue网站在除索引之外的所有页面上返回“无法获取/路径”

Question

I am using Vue on Node.js to host my website on an AWS EC2 instance. I dont have an index node.js file, just the vue-router file. I use AWS CloudFront to bind my certificate to my traffic. The problem is that everytime i access the site through the server's link, the site works perfectly, but whenever i access it through the cloud-front link, only the index of the website will show up. No /about or /contact; instead it returns Cannot GET /about.

My Router:

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' },
  ],
});

I have already tried to add the historyApiFallback: true to my webpack config but it had no effect.

Answer 1

According to Vue Router 's documentation, when using your router in history mode, your webserver requires additional configuration .

I don't exactly know how do EC2 instances work, but if you don't have a webserver proxying all your requests to index.html , Vue-router will not be able to handle the other requests.