uniapp打包H5空白页面或者刷新404问题
uniapp打包H5空白页面或者刷新404问题
uniapp的路由跟vue一样,有hash模式和history模式,
使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState
API 来完成 URL 跳转而无须重新加载页面。
如果用hash的话,url后面会有#号,这样不美观也不好获取参数,比如我微信公众号登录需要跳转就会受到#影响,那就得用history模式,
-
"h5" : {
-
"title" : "xxx",
-
"domain" : "zlz.xxx.com",
-
"router" : {
-
"mode" : "history"
-
-
}
-
-
}
但这样打出包来可能会出现空白页面,然后报这个错:
Uncaught SyntaxError: Unexpected token '<'
这就是因为开发时默认是没有项目名的,都是相对于根目录,如果你部署的环境是有路径的,就需要配置base路径,否则找不到静态资源
有的人说改成‘./’,但我改了以后url又出现#号了。
-
"h5" : {
-
"title" : "test",
-
"router" : {
-
"mode" : "history",
-
"base" : "./"
-
}
-
-
}
所以还是谨慎使用./,而是改成你的项目实际地址,如果你的项目地址为 xxx.com/niubi/,或者xxx.com/niubi/pages/user/user,相当于在根目录前多了个niubi,那就把base改成你的实际目录就行了
-
"h5" : {
-
"title" : "test",
-
"router" : {
-
"mode" : "history",
-
"base" : "/niubi"
-
}
-
-
}
这样访问时就是自动在路径前都加上niubi 了,而且不会出现#
刷新404问题
我是微信登录需要跳转到本页面,但每次一跳就成了404了,你会发现开发时刷新没事,但是打包后一刷新就404
这是路由特性决定的,还是在这个文档里说的很清楚
想用history又想刷新直接跳到对应页面,就需要后台服务器配置做配合
Apache
-
-
RewriteEngine On
-
RewriteBase /
-
RewriteRule ^index\.html$ -
-
RewriteCond %{REQUEST_FILENAME} !-f
-
RewriteCond %{REQUEST_FILENAME} !-d
-
RewriteRule . /index.html
-
除了 mod_rewrite
,你也可以使用 FallbackResource
。
#nginx
-
location / {
-
try_files $uri $uri/ /index.html;
-
}
我用的nginx,在配置文件中加入这段话就解决了,当然,如果有路径,还是需要加上路径
-
location /niubi {
-
try_files $uri $uri/ /niubi/index.html;
-
}
这样用了服务器的伪静态,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html
页面,这个页面就是你 app 依赖的页面。