uniapp打包H5空白页面或者刷新404问题

uniapp的路由跟vue一样，有hash模式和history模式，

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

官方文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

如果用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

这是路由特性决定的，还是在这个文档里说的很清楚 

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

想用history又想刷新直接跳到对应页面，就需要后台服务器配置做配合

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 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 依赖的页面。