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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue-router路径计算问题

    昨天刚刚发表了一个前端跨域新方案尝试,今天在开发中就遇到的了问题. 起因 前端使用的是vue-router组件的history模式,但是由于我们的整个页面都是从static(静态资源站)load过来的,所以其他页面自然也需要跨域去拿,然而就在跨域的时候 vue-router 出了问题. 分析问题 我们的api站点在 api.com 而静态资源在 static.com,页面的base标签也指向static <base href="http://static.com" rel=&qu

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

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

    vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 一般情况下,我们不喜欢丑丑的hash,类似于index.html#/matchResult,可以使用路由的history模式.history模式是利用history.pushState API来实现页面跳转. 但是有个问题,在使用nginx的时候,我们需要添加一些配置. 直接配置在根路径下 直接配置在根路径下,访问的时候只用输入http://yoursite.com,

  • vue router的基本使用和配置教程

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 1.在main.js文件中引入相关模块

  • webpack+vue+express(hot)热启动调试简单配置方法

    前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的. 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description&quo

  • Nginx 启用 BoringSSL的配置方法

    本文介绍以 BoringSSL 作为 Nginx 加密库的配置方法. BoringSSL 是由谷歌从 Openssl 中抽出来后独立发展的作品,是 Google.Cloudflare 等大牌的御用. BoringSSL 有优点也有缺点:优点是它原生提供 加密算法等价组 (具体我之后会写文章介绍)支持,并且对 tls1.3-draft23 支持较为不错:而缺点是不能在 Nginx 下启用 tls1.3 协议,且 BoringSSL 自身容易编译失败. 本文介绍使用 BoringSSL 替代 Ope

  • Java获取此次请求URL以及服务器根路径的方法

    本文介绍了Java获取此次请求URL以及获取服务器根路径的方法,并且进行举例说明,感兴趣的朋友可以学习借鉴下文的内容. 一. 获取此次请求的URL String requestUrl = request.getScheme() //当前链接使用的协议 +"://" + request.getServerName()//服务器地址 + ":" + request.getServerPort() //端口号 + request.getContextPath() //应用

  • Nginx下ThinkPHP5的配置方法详解

    本文主要给大家介绍了关于Nginx下ThinkPHP5的配置方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: url里public目录的隐藏 出于安全的考虑,TP5的入口文件改成放在public下了,因为这样的话能防止被恶意用户访问到"/thinkphp/"."/vendor/"等等这些目录下的文件.所以当你以之前的习惯将网站documentroot配置为项目根目录的时候就会需要在url后面加上/public/来访问.当然可能也会有童鞋把入口文件放

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • 基于tomcat映射路径配置方法分享

    tomcat请求头配置 在使用postman测试的时候(携带参数)我们经常会发现浏览器一个错误:request header is too large,意思是请求头字段太长了.在这里需要配置下tomcat请求头长度. tomcat-service.xml <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443&q

  • Node.js模块全局安装路径配置方法

    下载安装NodeJS后,在自己选择的路径下会有如下的文件: 默认情况下NodeJS安装会同时安装npm(模块管理器:用于管理用户require的模块,有全局和本地两种). 注: 全局:执行npm install <模块的名字> -g 就会将模块装在全局路径下,当用户在程序中require(<模块的名字>)的时候不用考虑模块在哪,如果不修改全局路径,用户下载的模块会默认在C:\Users\Administrator\AppData\Roaming\npm这个路径下. 局部:执行npm

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

随机推荐