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

Posted 2023-02-22

【中文标题】为啥 Vue 路由器/Webpack 开发服务器现在在页面刷新时显示无法获取/路径？

【英文标题】：Why does Vue router / Webpack dev server shows Cannot GET /path on page refresh now?为什么 Vue 路由器/Webpack 开发服务器现在在页面刷新时显示无法获取/路径？

【发布时间】：2018-06-15 20:24:33

【问题描述】：

更新：

原来是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') ,
      ],
    ,
    [...]

我认为这与它有关。

【问题讨论】：

因为您没有将所有匹配路由转发到客户端来处理路由的服务器。

@Ohgodwhy 抱歉，我忘了提到我在 localhost 上看到了这个，所以问题出在 webpack 的开发服务器上。我不知道如何让它像以前一样工作

【参考方案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 可能是导致问题的原因。希望这能解决您的问题。这是我能够解决错误的唯一方法。

【讨论】：

感谢您的回答。虽然我仍然得到相同的结果（我重新启动了npm run dev）

谢谢！那么，我们是否只需要接受这个新的解决方法并每次都执行此步骤，或者这只是 Vue webpack 模板中的一个错误，在开发模式下不应该是这样的？我在 vue-router 页面上创建了一个issue。不确定这是不是故意的，但这会让很多人感到困惑

@Un1 不客气。我不认为这是故意的，或者据我所知，一个错误似乎只影响 Windows 系统。这是我从在线资源中找到的有关此问题的唯一信息。

【参考方案2】：

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

module.exports = 

  configureWebpack: 
    devServer: 
      historyApiFallback: true
    
  

;

【参考方案3】：

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

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

【参考方案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"
      
    ]
  

【讨论】：

虽然您的链接可能会有所帮助，但它本身并不是一个答案。您应该直接在答案中包含来自链接的有用信息。

谢谢@taylorthurlow 我提供了更多细节

【参考方案5】：

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

【参考方案6】：

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

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

【参考方案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 时，它的工作方式与生产环境相同。