nginx部署uniapp项目,history模式,打开页面空白,报错:Uncaught SyntaxError: Unexpected token ‘<‘

一、问题描述

nginx部署uniapp项目,history模式,打开页面空白,报错:Uncaught SyntaxError: Unexpected token ‘<’

这种方式基本上就是配置错了导致的。

二、解决方法

下面我就讲一下我的解决方法吧,步骤如下:

在这里插入图片描述

H5配置这里需要注意下,我这里选的是history,然后在运行路径哪里填了个路径,tk,后面会用到,他这里说明了,如果填的是./,默认就是hash模式,在路由模式哪里选择history,没有用,这两者打包出来之后,最明显的效果就是,hash打包出来的,点击index.html能直接打开显示,history打包出来的,点击index.html,显示不了。

关于路由模式,可以看下这篇文章:https://blog.csdn.net/mashangzhifu/article/details/118416768

然后点击发行

在这里插入图片描述

在这里插入图片描述

点击发行,打包成功之后如下

在这里插入图片描述

打开index.html,可以看下效果

在这里插入图片描述


如果显示空白的话那就是history模式,nginx配置文件如下:

server {
	listen       80;
	server_name  www.xxxx.com;

	#charset koi8-r;

	#access_log  logs/host.access.log  main;

	
	location /prod-api/ {
		proxy_pass http://localhost:8083/;
	}
	
	location ^~ /tk {
	  alias  /root/soft/h5/;
	  index  index.html index.htm;
	  try_files $uri $uri/ /index.html last;
	}

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

将打包好的h5目录上传到/root/soft/目录下,然后重新下nginx,访问域名:http://www.xxx.com/tk 即可打开成功

相关文章

咱们国内现在手机分为两类,Android手机与苹果手机,现在用的...
前言 上一篇做了php的微信登录,所以也总结一下Java的微信授...
前言 上一篇文章写到如何上架IOS应用到Appstore,其中漏掉了...
文件-新建-1.项目 ┌─uniCloud 云空间目录,阿里云为uniClo...
Flexbox #Flex 容器 Flex 是 Flexible Box 的缩写,意为&...
globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景...