Question

UPDATE：

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

问题：

我已经使用vue init webpack projectName安装了一个新的Vue项目，现在我在刷新页面时不断获取：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 historyApiFallback: true上方historyApiFallback: {...}添加--history-api-fallback。您可以在github上找到配置中的一些更改。

修改：

尝试在行package.json的{{1}}中添加"dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js"，然后再次运行npm install。或尝试使用该args创建新项目。

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

Answer 2

我也有同样的问题。原来如果你在dev.config中使用Htmlwebpack插件，html不会自动写入磁盘，所以你需要一个C:/Ruby23/lib/ruby/gems/2.3.0/gems/puma-3.11.0/lib/puma/binder.rb:149:in `check': SSL not available in this build (StandardError)并在HtmlWebpackPlugin中设置HtmlWebpackHarddiskPlugin：

alwaysWriteToDisk: true

Answer 3

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

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};

Answer 4

官方的 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"
      }
    ]
  }
}

Answer 5

检查与静态文件夹是否没有不一致。查看此答案：https://stackoverflow.com/a/63033515/165326

Answer 6

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

只需删除模式：“历史记录”即可解决您的问题。

Answer 7

我在vue路由器历史记录模式和webpack开发服务器上苦苦挣扎了一段时间。原来我在vue路由器定义中缺少“ base”属性：

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时，它的工作方式与生产相同。

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

UPDATE：

问题：

index.js

7 个答案: