详解nginx配置vue h5 history去除#号

2024-04-16 12:47:21

vue的默认配置是使用hash模式，这样我们访问的时候都带有了一个#号，再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式，优势就出现了需要去除#号，于是vue端就需要配置该模式，并且使用懒加载，vue端的配置如下：

首先先声明一下，这是使用vue+nginx实现前后端分离的项目，并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域)，

然后就是打包的配置：

!!!注意，这里配置的assetsPublicPath一定要配置成 "/" 而不是 "./"之类的，不然nginx服务端即使配置成为了vue h5 history模式，也会出现如下错误:

Uncaught SyntaxError: Unexpected token <
manifest.16a4233693dc526194f6.js:1 Error: Loading chunk 23 failed.
  at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)
d.oe @ manifest.16a4233693dc526194f6.js:1
Promise.catch (async)
component @ app.a879af571e30c08073af.js:1
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
ve @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ app.a879af571e30c08073af.js:1
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
pe @ vendor.8f8ebced8a21d4a0633a.js:6
_e.confirmTransition @ vendor.8f8ebced8a21d4a0633a.js:6
_e.transitionTo @ vendor.8f8ebced8a21d4a0633a.js:6
t.push @ vendor.8f8ebced8a21d4a0633a.js:6
Pe.push @ vendor.8f8ebced8a21d4a0633a.js:6
b @ vendor.8f8ebced8a21d4a0633a.js:6
t @ vendor.8f8ebced8a21d4a0633a.js:12
Fi.t._withTask.s._withTask @ vendor.8f8ebced8a21d4a0633a.js:12
vendor.8f8ebced8a21d4a0633a.js:6 Error: Loading chunk 23 failed.
  at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)

所以，请谨慎配置，坑比较多，下面就是nginx服务端的配置了，

server {
    listen    80 default_server;
    listen    [::]:80 default_server;
    server_name _;
    root     /usr/share/nginx/dist;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    #根据路由设置，避免出现404
    location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://service.xxxx.com/;
    }
    location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      index index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }
    error_page 404 /404.html;
      location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }

这样配置就算是配置好了，然后就不会出现页面刷新显示404的错误了。

到此这篇关于详解nginx配置vue h5 history去除#号的文章就介绍到这了,更多相关nginx配置h5去除#号内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue路由权限控制解析

前言本人在公司主要负责中后台系统的开发,其中路由和权限校验算是非常重要且最为基本的一环.实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对这个知识点的一些总结. 项目总体目录结构进入今天主题之前,我们先来梳理下整个项目,src目录下的. api: 接口请求 assets: 静态资源 components: 通用组件 directive: 自定义指令
详解Vue中的watch和computed

前言对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in
解决vue init webpack 下载依赖卡住不动的问题

有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖:选择 No,I will handle that myself 生成完项目之后,再cd进入项目文件夹,然后再npm install 安装即可. 但是如果真的安装"个把"小时也没成功那就用:cnpm install 吧如果安装过程中等待太久,我们难免会不耐烦,所以会中途关闭项目.那么我们接下操作 npm run dev 肯定是报错的正确做法:cd进入项目文件夹,然后再n
在VUE中使用lodash的debounce和throttle操作

说明: debounce和throttle在脚手架的使用,此处以防抖函数debounce为例避免按钮被重复点击引入: import lodash from 'lodash' 使用: 直接使用debounce方法 // 审核 audit: lodash.debounce(function() { this.$refs['model'].saveTotalResult(1).then(() => { const reportId = this.activeReport.id; report.aud
解决vue 使用axios.all()方法发起多个请求控制台报错的问题

今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance.all = axios.all 就完美解决了! 补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常报错: _util2.default.axios.
vue 解决在微信内置浏览器中调用支付宝支付的情况

我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "
vue-axios同时请求多个接口等所有接口全部加载完成再处理操作

我就废话不多说了,大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct, perms) => { console.log('全部加载完成') }) ) .catch(err => { console.log(err.response) }); 需要在当前路由引入axios import Axios from "axios"; 补充知识:vue,axios处理
详解nginx配置vue h5 history去除#号

vue的默认配置是使用hash模式,这样我们访问的时候都带有了一个#号,再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式,优势就出现了需要去除#号,于是vue端就需要配置该模式,并且使用懒加载,vue端的配置如下: 首先先声明一下,这是使用vue+nginx实现前后端分离的项目,并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域), 然后就是打包的配置: !!!注意,这里配置的assetsPublicPath一定要配置成 "/" 而不是 "
详解nginx配置location总结及rewrite规则写法

location正则写法一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这条规则将匹配到所有请求 # 但是正则和最长字符串会优先匹配 [ configuration B ] } location /documents/ { # 匹配任何以 /documents/ 开头的地址,匹配符合以后,还要继续往下搜索 # 只有后面的正则表达式没有匹配到时,这
详解Nginx配置SSL证书实现Https访问

背景由于项目需求,安全起见,需要将之前的http接口访问变成https访问,所以需要配置SSL证书.项目的架构是这样的: 基本架构是硬负载(ReadWhere)+ 软负载(Nginx)+ Tomcat集群,现在的问题是SSl证书要配置在哪里,直接配置在硬负载上?还是分别配置在Nginx和Tomcat上?还是其他的配置方法呢? 首先在硬负载上配置放弃了,然后通过在网上查找资料,发现可以只在Nginx上配置证书,就是说Nginx接入使用Https,而Nginx与Tomcat之间使用Http进行衔接
详解Nginx配置多站点需要踩的坑

从Windows下的Apache转移到Linux下的Nginx,发现有很多坑需要踩. 以下就做个简单的记录,方便后来者爬坑. 配置Nginx,一般会遇到以下几个坑: 配置nginx支持pathinfo模式 - 优化URL,隐藏index.php - 同一服务器配置多站点配置pathinfo模式在server(也就是你的站点,一个server对应一个站点)中输入以下内容: location ~ ^(.+\.php)(.*)$ { root html/[站点目录]; #配置站点目录路径 fast
详解nginx配置url重定向-反向代理

本文系统:Centos6.5_x64 三台主机:nginx主机,hostname: master.lansgg.com IP: 192.168.10.128 apache主机,hostname: client1.lansgg.com IP: 192.168.10.129 一.nginx 地址重定向二.nginx 反向代理 1.地址重定向:是指当使用者浏览某个网址时,将他导向到另一个网址的技术.常用在把一串很长的网址,转成较短的网址.因为当要传播某网站时,常常因为网址
详解nginx 配置多个tomcat共用80端口

场景:项目1放在tomcat1中,项目2放在tomcat2中,两个tomcat放在同一台服务器上,需要共享80端口访问注意:这里和集群部署是不同的,集群部署是一个项目放在多个tomcat中. 这里通过nginx做反向代理,nginx请到http://nginx.org/en/download.html自行下载, 修改conf/nginx.conf中的server如下: server { listen 80; server_name 192.168.1.197; #charset koi8-r;
详解Nginx防盗链和Nginx访问控制与Nginx解析php的配置

详解Nginx防盗链和Nginx访问控制与Nginx解析php的配置 Nginx防盗链配置如下,可以和上面的配置结合起来 location ~* ^.+\.(gif|jpg|png|swf|flv|rar|zip|doc|pdf|gz|bz2|jpeg|bmp|xls)$ { expires 7d; valid_referers none blocked server_names *.test.com ; if ($invalid_referer) { return 403; } access
详解 Nginx 301重定向的配置

详解 Nginx 301重定向的配置 301重定向是很常见的需求,比如访问 nowamagic.net,自动跳到 www.nowamagic.net.或者倒过来,访问 www.nowamagic.net 跳到 nowamagic.net.Nginx 中配置 301 重定向(301 redirect)很容易,下面介绍下方法. 打开 nginx.conf 文件,找到你的 server 配置段: server { listen 80; server_name nowamagic.net www.now
详解Nginx 虚拟主机配置的三种方式(基于IP)

Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1
详解Nginx 虚拟主机配置的三种方式(基于端口)

Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于IP) https://www.jb51.net/article/14974.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 2.Nginx基于端口的虚拟主机配置如一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配

详解nginx配置vue h5 history去除#号

相关推荐

随机推荐