如果nginx中配置了location规则，在vue页面中路由跳转的时候会将location的前缀刷掉怎么解决？

  • Z时代
  • 2024-03-06
  • 分类：IT

如果nginx中配置了location，在vue页面中路由跳转的时候会将location的前缀刷掉怎么处理？
例如在nginx的配置里：

server{
  listen xxxx:xxxx;
  # 这里匹配的规则是 /mydisk/
  location /mydisk/ {
    root /var/www/mydisk/web;
    index index.html;
  }
}

vue项目中，路由的规则：

const routes = [
  {
    path: '/',
    name: 'filelist',
    component: FileListCom,
  },
  {
    path: '/upload',
    name: 'fileupload',
    component: UploadCom
  }
]

菜单：

<el-menu router default-active="/mydisk/" mode="horizontal">
  <el-menu-item index="/">
    A
  </el-menu-item>
  <el-menu-item index="/upload">
    B
  </el-menu-item>
</el-menu>

把项目打包发布后，访问http://xxxx:xxxx/mydisk/，这时候访问的页面是正常的，但是点击菜单A后，地址就变成了http://xxxx:xxxx/（或者点击菜单B后，地址变成http://xxxx:xxxx/upload），这样页面资源就请求不到了
我现在的解决办法是直接在vue路由规则里写死前缀/mydisk/,但是应该有更规范的办法吧，望大家赐教

回答：

在 vue.config.js 中设置 publicPath 选项，将 publicPath 设置为 ‘/mydisk’，然后重新打包

https://blog.csdn.net/qq_27575627/article/details/130215619

回答：

1.修改vue.config.js publicPath 为 /maydistk
2.修改路由

const router = createRouter({history: createwebHistory('/maydistk'),routes}}
  1. 重新打包

以上是 如果nginx中配置了location规则，在vue页面中路由跳转的时候会将location的前缀刷掉怎么解决？ 的全部内容， 来源链接： utcz.com/p/934597.html

回到顶部