vue项目去掉url中的#引发的血案

时间淡忘一切

于 2020-08-18 00:06:40 发布

阅读量602

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_35818188/article/details/108067287

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文分享了在Vue项目中去除URL中#号的方法，通过将路由模式从hash改为history，并详细介绍了如何在Nginx配置中进行相应调整，以避免刷新页面时出现404错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近vue项目要部署到服务器，但是发现url中有一个#号，对于我一个强迫症来说是非常难受的，所以找了好多博客，终于解决了，就是在router文件夹下的index.js中的

const router = new Router({
  mode: 'hash',  //hash改成history就可以解决url中带有#号的问题
  scrollBehavior: () => ({ y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})

但是随之而来的又是另一个问题，就是不能刷新了，刷新就404，几经查找是因为history模式导致的问题，所以在nginx上配置进行了修改附配置

  location / {  
   			//这个必须要
            try_files $uri $uri @route;
            root /www/jenkins/workspace/dining_room_vue/dist;
            index  index.html index.htm;

        }
     //这个必须要
 location @route { 
        rewrite ^.*$ /index.html last;
      }

重新加载nginx，问题解决