Question

我正在Node.js上使用Vue将网站托管在AWS EC2实例上。我没有索引node.js文件，只有vue-router文件。我使用AWS CloudFront将证书绑定到流量。问题是，每次我通过服务器的链接访问该站点时，该站点均正常运行，但是每当我通过云前端的链接访问该站点时，只会显示该站点的索引。没有/ about或/ contact;而是返回Cannot GET / 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的文档，在history模式下使用路由器时，您的网络服务器需要additional configuration。

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

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

1 个答案: