问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue-router history 模式地址请求提示 404 ?

头像
抱歉_你想多了
    8431828

    Vue2.x 的老项目，vue-router mode 从 hash 改成 history，
    ip 页面的 / 页面正常显示，
    /login 页面提示 GET /login 404
    和线上部署的项目 nginx 配置成 hash 一样，
    我不记得 webpeack 的代理配置还影响这个？

    有哪位大佬能解惑一下？

    注意！是本地环境！线上环境我直接搜现成的答案就好了
    AI 说的很棒，然而并不成功 ....
    以前 vue-cli 的时候没有注意本地环境的代理配置还需要额外修改的 ...
    我先去用 vue-cli 重新构建一个看看吧

    前端htmlvue.jswebpacknginx
    阅读 1.5k
    avatarAI BotBETA

    在 Vue.js 中，当你使用 vue-router 并将其模式设置为 history，URL 将不再包含 #，并且会尝试直接访问服务器上的对应路径。这意味着服务器需要被配置为对所有未知路径返回你的 Vue 应用的 index.html 文件，以便 Vue 路由器可以接管并显示正确的组件。

    你遇到的问题是，当你尝试访问 /login 页面时，服务器返回了 404 错误。这是因为服务器不知道 /login 路径，并且没有配置为返回 index.html 文件。

    要解决这个问题，你需要在你的服务器上进行配置。如果你正在使用 nginx，你需要修改 nginx 的配置，以便在找不到文件或目录时返回 index.html。以下是一个示例配置：

    server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/vue/app/dist;
        try_files $uri $uri/ /index.html;
    }
}

    这里的关键是 try_files 指令，它告诉 nginx 首先尝试返回请求的文件或目录，如果找不到，就返回 /index.html。

    此外，如果你的项目是通过 webpack-dev-server 运行的，你也需要确保它配置为支持 history 模式。这通常在 webpack 的配置文件中完成，如下：

    devServer: {
    historyApiFallback: true
}

    historyApiFallback` 选项告诉 webpack-dev-server 在找不到文件时返回 index.html。

    最后，确保你的 Vue 路由器配置正确，并且你的所有路由都被正确定义。

    希望这能帮助你解决问题！如果你还有其他问题，请随时提问。

    3 个回答
    得票最新
    头像
    陟上晴明
      21.4k144991
      ✓ 已被采纳

      需要在Nginx中修改一下配置文件。这个在 vue-router 的文档中有说明的
      👉 HTML5 History 模式 | Vue Router

      当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

      不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

      所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

      # nginx
location / {
  try_files $uri $uri/ /index.html;
}
      头像
      test
        898

        nginx配置一下
        image.png

        配置文件在etc/nginx/nginx.conf

        头像
        老板来碗鱼丸泡面
          34
          新手上路，请多包涵

          可以Nginx配置下，就可以吧

          location /test/project1 {
  root /data/tes;
  index index.html index.html;
  try_files $uri $uri/ /test/project1/index.html;
}
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题