为什么 Vue router / Webpack dev server 显示 Cannot GET /path on page refresh now？

Question

更新：

原来是Windows上的Vue webpack模板有bug，很快就会修复

问题：

我已经通过安装 vue init webpack projectName 开始了一个新的 Vue 项目，现在我不断收到：Cannot GET /path（在本地主机上）当我刷新页面时。

例如，如果我转到 /contact，我会看到该页面的内容，但是一旦我点击刷新，我就会看到 Cannot GET /contact

不仅如此，您现在不能简单地在地址栏中手动输入路线，您会得到同样的错误。

我有mode: 'history'
我在本地主机上看到这个 (npm run dev)

前几天还可以正常使用。我现在如何让它工作？

互联网上的所有答案都没有用（也许我没有正确应用它们）

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import Home from '@/components/Home'
import Contact from '@/components/Contact'

Vue.use(Router)
Vue.use(Vuetify)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

因此，我现在也无法使此重定向工作：

{
  path: '*',
  redirect: '/'
}

我得到同样的错误。

所以我想这可能是 Vue Webpack 的模板错误，我注意到 webpack.dev.conf.js 现在有点不同，现在有这样的行：

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    [...]

我认为这与它有关。

Answer 1

在您的 webpack.dev.conf.js 中，在 historyApiFallback: {...} 上方添加 historyApiFallback: true。您可以在 github.

上找到配置中的一些更改

编辑:

再次尝试在 "dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js" 和运行 npm install 行的 package.json 中添加 --history-api-fallback。或者尝试使用该参数创建新项目。

请注意，该行缺少的 --history-api-fallback 可能是导致此问题的原因。希望这能解决您的问题。这是我解决错误的唯一方法。

Answer 2

我也遇到了同样的问题。事实证明，如果你在 dev.config 中使用 Htmlwebpack 插件，html 不会自动写入磁盘，所以你需要一个 HtmlWebpackHarddiskPlugin 并在 HtmlWebpackPlugin 中设置 alwaysWriteToDisk: true:

new HtmlWebpackPlugin({
    template: 'index.html',
    title: 'You app',
    alwaysWriteToDisk: true,
}),
new HtmlWebpackHarddiskPlugin(),
new webpack.HotModuleReplacementPlugin()

Answer 3

对于那些通过 VUE CLI 3 偶然发现这个问题的人，将下面的代码添加到 vue.config.js 然后重新运行 yarn run serve:

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};

Answer 4

检查是否与静态文件夹不一致。看到这个答案：

Answer 5

当 mode: "history" 与路由器一起使用时会出现此问题。我知道这不是确切的解决方案，但是是的，如果您正在寻找一些解决方法，这可能会有所帮助。

只需删除模式：“历史记录”，您的问题就会得到解决。

Answer 6

我在 vue router history mode 和 webpack dev server 上纠结了一段时间。原来我在 vue 路由器定义中缺少“基础”属性：

const router = new VueRouter({
    mode: 'history',
    base: "/user",
    routes: [ ... ]
});

我的 webpack 配置如下所示：

devServer: {
    ...
    historyApiFallback: {
        rewrites: [
            { from: /^\/user/, to: '/user.html' }
        ]
    }
}

所以现在当我去 http://mylocaldev.com/user or http://mylocaldev.com/user/whatever 时，它的工作方式与生产相同。

Answer 7

官方 vue-router 文档讨论了这个问题，并且由于我使用 firebase，因此 firebase.json 中修改“重写”的解决方案对我有用：

https://router.vuejs.org/guide/essentials/history-mode.html

从 vue-router 文档复制的答案：

Add this to your firebase.json:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

为什么 Vue router / Webpack dev server 显示 Cannot GET /path on page refresh now？

Why does Vue router / Webpack dev server shows Cannot GET /path on page refresh now?

webpack

vue.js

webpack-dev-server

vue-router

vuejs2

更新：

问题：

index.js