vue-router+nginx 非根路径配置方法

xietao3 发布于2019-08-22 18:22 / 421人阅读

摘要：的默认数据模式使用的来模拟一个完整的，于是当改变时，页面不会重新加载。一般情况下，我们不喜欢丑丑的，类似于，可以使用路由的模式。模式是利用来实现页面跳转。但是有个问题，在使用的时候，我们需要添加一些配置。

vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

一般情况下，我们不喜欢丑丑的hash，类似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API来实现页面跳转。

但是有个问题，在使用nginx的时候，我们需要添加一些配置。

直接配置在根路径下

直接配置在根路径下，访问的时候只用输入http://yoursite.com，在nginx的配置如下

location / {
  try_files $uri $uri/ /index.html;
}

非根路径配置

如果一个域名下有多个项目，那么使用根路径配置就不合适了，我们需要在根路径下指定一层路径，比如说

A项目

http://yoursite.com/A

B项目

http://yoursite.com/B

nginx的配置

    location ^~/A {
            alias /XX/A;//此处为A的路径
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B;//此处为B的路径
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

tip: 注意要用alias不能用root

专线服务服务器托管 Nginx安装方法 nginx配置 nginx网站配置高防nginx配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95796.html

VUE-Router按模块配置、懒加载+ Windows中Nginx服务安装、配置解决404

摘要：文章涉及到路由模块化，懒加载，安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种。无法启动服务，报错参考资料发现端口冲突，已经在服务中已经配置端口。服务端口更改为。文章涉及到VUE路由模块化，懒加载，nginx安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种BUG。参考了很多方法，会在文章中引用出来...

habren 2019-07-25 14:37 评论0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我们需要在后端进行额外配置。模式的配置方法我们来看看官方文档是教我们怎么配置的模式。模式的配置实践及原理强烈建议阅读这部分之前，先看一下的这部分文档和这部分文档。只配置前端的情况首先，我们将设置为，但不配置后端。始发于我的博客 ryougifujino.com，欢迎访问留言。 vue-router分为hash和history模式，前者为其默认模式，url的表现形式为...

Richard_Gao 2019-08-30 11:04 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

姘搁『 2019-08-23 14:38 评论0 收藏0
vue.js vue-router history模式路由，域名二级目录子目录nginx配置

摘要：修改三个配置，具体操作日后有时间更新，不懂私聊项目目录配置实例项目路径配置指向项目放在，但是指向，访问就好了修改三个配置，具体操作日后有时间更新，不懂私聊1 const route = new Router({ mode: history, base: /doctor-html/, routes }) 2 assetsPublicPath: /doctor-html/, ...

focusj 2019-07-25 14:22 评论0 收藏0