为什么Vue router/Webpack dev server显示现在无法刷新页面上的GET /路径？

Question

更新:

事实证明这是Windows上Vue webpack模板中的一个错误,它很快就会修复

---

题:

我已经通过安装它开始了一个新的Vue项目vue init webpack projectName,现在我Cannot GET /path在刷新页面时不断获得:( 在localhost上).

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

更重要的是,你现在不能手动在地址栏中输入路线,你会得到同样的错误.

---

• 我有 mode: 'history'
• 我在localhost(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添加.您可以在github上找到它的配置中的一些更改.historyApiFallback: truehistoryApiFallback: {...}

编辑:

尝试添加--history-api-fallback在package.json上线 "dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js"和运行npm install一次.或尝试使用该args创建新项目.

请注意--history-api-fallback,该行上的缺失可能导致了该问题.希望这能解决你的问题.这是我能够解决错误的唯一方法.

Answer 2

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

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};