uniapp使用history路由模式打包上线到前端网页托管的注意事项

问题描述

我们在使用uniapp开发项目的时候，在manifest.json配置项的web配置中，路由模式有两种，分别是hash模式和history模式，在之前项目中，我们经常采用hash模式，这种路由模式打包简单，不用做额外的配置，主要的问题是，会在url中出现#号，可能会影响美观，如下所示：

javascript 复制代码

https://ssr.qingnian8.com/#/pages/classify/classify

如何去掉#号那，那么就需要使用history路由模式了，但是改成这种模式的话，需要做一些配置才行。

如上所示：

1.将路由模式改为history

2.运行路径一定要为空，或者/线，千万不用用./，使用history路由模式放到web前端托管的话，是绝对不能放到二级目录的，只能在根目录下，所以这个位置要为空

3.如果前端网页托管自己配置了域名并且开启了https配置了SSL安全证书，就勾上，如果没有配置https那么就不要勾选。

如果你使用的是代码视图，可以直接复制下面代码，那种方式都一样。

javascript 复制代码

"h5": {
"title": "咸虾米壁纸",
	"router": {
		"base": "",
		"mode": "history"
	},
	"devServer": {
		"https": true
	}
}

如果你没有服务器，那就直接放到unicloud的前端网页托管中，如果没有，点击右上角新增一个，发行的时候，直接勾选"将编译后的资源部署到前端网页托管"，这样好处是打包完成后，自动商城到云端了，不需要你手动上传了。

在前端网页托管中，可以看到刚刚打包好的文件，点击参数配置，里面有默认网址，可以直接使用默认网址来查看打包的网页了，默认网页每天有访问次数限制，仅做测试使用，如果想要可以一直使用，建议绑定自己的域名，可以查看这篇文章：uniCloud服务空间前端网页托管绑定自定义配置网站域名

我按照如上文章，已经绑定了自己的域名，所以可以通过下面网址访问，在这个url中已经不存在#号了，看起来是不是很美观了：

javascript 复制代码

https://ssr.qingnian8.com/pages/classify/classify

正常访问网站内的各个页面是没有任何问题，但是如果刷新一下，就会出现空白页了，如何解决那？

在路由规则中，点击编辑，将404页面，设置成index.html，这样再刷新的时候，就解决了出现空白页面的情况。

如果想让网页标签中出现icon小图标，可以看这篇文章，uniapp项目打包H5在浏览器标签显示favicon.ico图标

如果想学习一下完整的壁纸项目，可以学习一下：咸虾米壁纸uniapp全栈微信小程序vue3后台