webpack - 为什么 Vue router/Webpack dev server 现在显示 Cannot GET/path on page refresh？

Question

更新:

原来是Windows下Vue webpack模板的bug，很快修复

---

问题:

我通过使用 vue init webpack projectName 安装它开始了一个新的 Vue 项目，现在我不断收到:Cannot GET/path (on localhost) 当我刷新时一页。

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

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

---

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

---

几天前它确实工作正常。我现在如何让它发挥作用？

网上的所有答案都没有用(好吧，也许我没有正确应用它们)

---

索引.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: true 添加到 historyApiFallback: {...} 的正上方。您可以在 github 上找到配置中的一些更改。

编辑:

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

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