为什么 Vue 路由器/Webpack 开发服务器现在在页面刷新时显示无法获取/路径？

Question

更新：

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

---

问题：

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

例如，如果我转到/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 中添加historyApiFallback: true 就在historyApiFallback: {...} 上方。配置有一些变化，你可以在 github 上找到它。

编辑：

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

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

Answer 2

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

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};

Answer 3

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

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

Answer 4

vue-router 官方文档讨论了这个问题，因为我使用 firebase，所以在 firebase.json 中修改“rewrites”的解决方案适合我：

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"
      }
    ]
  }
}

Answer 5

检查静态文件夹是否存在不一致。 看到这个答案：https://stackoverflow.com/a/63033515/165326

Answer 6

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

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

Answer 7

我在 vue 路由器历史模式和 webpack 开发服务器上苦苦挣扎了一段时间。原来我错过了 vue 路由器定义中的“基础”属性：

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

我的 webpack 配置如下所示：

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

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