Javascript Vue，在Heroku部署期间，Express app不以历史记录模式将请求转发到index.html
TL；DR:单击此按钮会出现Javascript Vue，在Heroku部署期间，Express app不以历史记录模式将请求转发到index.html,javascript,node.js,express,vue.js,heroku,Javascript,Node.js,Express,Vue.js,Heroku,TL；DR:单击此按钮会出现未找到错误，即使我可以在导航栏中单击“登录”后转到并查看浏览器显示 我正在尝试将一个简单的应用程序部署到，目前正面临有关历史API和服务器路由的问题 如果您转到此链接和linkify.herokuapp.com并单击导航栏上的不同链接，您将看到浏览器中的url发生了更改。例如，如果单击“登录”，您将看到浏览器中的url将更改为 现在，如果您通过单击此处向服务器发送请求以获取登录页面，则会出现not found错误 我假设这是因为vue路由不是实际的URL，并且在按e
未找到错误我正在尝试将一个简单的应用程序部署到，目前正面临有关历史API和服务器路由的问题 如果您转到此链接和linkify.herokuapp.com并单击导航栏上的不同链接，您将看到浏览器中的url发生了更改。例如，如果单击“登录”，您将看到浏览器中的url将更改为 现在，如果您通过单击此处向服务器发送请求以获取登录页面，则会出现not found错误 我假设这是因为vue路由不是实际的URL，并且在按enter键时出现not found错误。我有一个登录路径。当我转到这个视图时，我可以在Chrome上看到链接url是。如果我点击回车键，我将得到404未找到的请求。 我尝试了下面的一段代码，以获取index.html页面的所有请求，但仍然得到
notfound//在生产环境中提供静态资产（生成文件夹）
if（process.env.NODE_env==“生产”）{
//设置静态文件夹
app.use（express.static（path.resolve（uu dirname，“…”，“client”，“build”））；
应用程序获取（“*”，（请求，请求）=>{
res.sendFile（path.resolve（uu dirname，“…”，“client”，“build”，“index.html”）；
});
}
}
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import store from '../store/index';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: 'Home - Linkify',
metaTags: [
{
name: 'description',
content: 'The home page of Linkify'
},
{
property: 'og:description',
content: 'The home page of Linkify'
}
]
},
},
{
path: '/login',
name: 'Login',
component: Login,
beforeEnter: (to, from, next) => {
store.dispatch('fetchAccessToken');
if (store.state.accessToken) {
next('/manage');
}
else {
next();
}
},
meta: {
title: 'Login - Linkify',
metaTags: [
{
name: 'description',
content: 'The login page of Linkify'
},
{
property: 'og:description',
content: 'The login page of Linkify'
}
]
},
},
{
path: '/register',
name: 'Register',
component: Register,
meta: {
title: 'Register - Linkify',
metaTags: [
{
name: 'description',
content: 'The register page of Linkify'
},
{
property: 'og:description',
content: 'The register page of Linkify'
}
]
}
}, {
path: '*',
name: '404', /*Serve this route for pages not found*/
component: () => import(/* webpackChunkName: "pagenoutfound" */ '../views/PageNotFound.vue'),
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
});
export default router;
...
new Vue({
router,
store,
render: createEle => createEle(App)
}).$mount('#app-container');
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="icon" href="/favicon.ico">
<meta name="description" content="URL Shortener ">
<meta name="keywords" content="URL,Shortener,Analytics,Fraud, Detection">
<meta name="author" content="Yigit Alparslan">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" sizes="57x57" href="/img/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href=".img/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app-container"></div>
<!-- built files will be auto injected -->
</body>
</html>
{
"name": "linkify.herokuapp.com",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"heroku-prebuild": "npm install --prefix server && npm install --prefix client && npm run build --prefix client",
"start": "npm start --prefix server",
"client": "npm run serve --prefix client",
"server":"npm run server --prefix server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ya332/url-shortener.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ya332/url-shortener/issues"
},
"homepage": "https://github.com/ya332/url-shortener#readme"
}
>package.json
>server
>server.js
>client
>dist
>img/icons (all the icons)
>public
>index.html
>manifest.json
>favicon.ico
>src>components
>package.json
>server
>server.js
>client
>dist
>img/icons (all the icons)
>public
>index.html
>manifest.json
>favicon.ico
>src>components
2020-04-12T04:45:13.187836+00:00 heroku[web.1]: Restarting
2020-04-12T04:45:13.190934+00:00 heroku[web.1]: State changed from up to starting
2020-04-12T04:45:37.259512+00:00 app[web.1]:
2020-04-12T04:45:37.259579+00:00 app[web.1]: > linkify.herokuapp.com@1.0.0 start /app
2020-04-12T04:45:37.259585+00:00 app[web.1]: > npm start --prefix server
2020-04-12T04:45:37.259585+00:00 app[web.1]:
2020-04-12T04:45:37.573868+00:00 app[web.1]:
2020-04-12T04:45:37.573915+00:00 app[web.1]: > linkify@1.0.0 start /app/server
2020-04-12T04:45:37.573916+00:00 app[web.1]: > node -r dotenv/config server.js
2020-04-12T04:45:37.573916+00:00 app[web.1]:
2020-04-12T04:45:38.656416+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2020-04-12T04:45:38.656431+00:00 app[web.1]: designed for a production
environment, as it will leak
2020-04-12T04:45:38.656432+00:00 app[web.1]: memory, and will not scale past a single process.
2020-04-12T04:45:38.668645+00:00 app[web.1]: Server listening on port 18065
2020-04-12T04:45:38.796155+00:00 app[web.1]: MongoDB Connected
2020-04-12T04:45:38.932110+00:00 heroku[web.1]: State changed from starting to up
2020-04-12T04:45:43.164498+00:00 heroku[router]: at=info method=GET path="/" host=linkify.herokuapp.com request_id=345bf302-9037-40c8-8fdd-d284ca7207b1 fwd="72.94.180.182" dyno=web.1 connect=0ms service=86ms status=304 bytes=430 protocol=https
2020-04-12T04:45:43.618951+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=linkify.herokuapp.com request_id=9e10b1ea-7233-4cbe-8974-131430f1a8a5 fwd="72.94.180.182" dyno=web.1 connect=1ms service=6ms status=304 bytes=430 protocol=https
2020-04-12T04:45:43.641271+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=linkify.herokuapp.com request_id=78023e22-64eb-4685-8085-bf8de5bb2145 fwd="72.94.180.182" dyno=web.1 connect=0ms service=28ms status=200 bytes=1620 protocol=https
2020-04-12T04:45:43.719714+00:00 heroku[router]: at=info method=GET path="/img/icons/favicon-32x32.png" host=linkify.herokuapp.com request_id=f1a3daa0-6ee0-474e-9672-e38698134d5e fwd="72.94.180.182" dyno=web.1 connect=0ms service=3ms status=304 bytes=430 protocol=https
2020-04-12T04:45:43.691637+00:00 heroku[router]: at=info method=GET path="/img/icons/android-icon-144x144.png" host=linkify.herokuapp.com request_id=39ca47e4-9653-4858-aed0-5d40deb3fd6d fwd="72.94.180.182" dyno=web.1 connect=0ms service=21ms status=304 bytes=431 protocol=https