History模式的配置细节
旧文从语雀迁移过来，原日期：2021-09-13
前言
我们知道，vue 单页面应用打包出来是静态资源，一般需要 nginx 或者其他服务器访问；当如果 Vue Router 是采用 History 模式时，又会有额外的配置。这里记录一下完整配置过程中的每一个细节。
静态资源
我们首先要配置好如何访问我们打包出来的静态资源。
基本配置
当 URL 无需前缀时，基础的配置是这样的：
server {
listen 80;
server_name testhistory.com;
location / {
root /Users/admin/www/h5;
index index.html;
}
}
- root：静态资源的位置
- index: 可以通过index来访问index.html，而index一般是可以省略的
然后配置上 Host：
127.0.0.1 testhistory.com
就可以通过 http://testhistory.com 就可以访问到页面了。
带前缀的访问路径
有时候，同一域名下有可能多个不同的前端服务，这时候我们会通过前缀告诉 nginx 加载或者反向代理到对应的资源（比如说我司的不同城市业务对应的前端项目就不一样）。
带前缀的静态资源配置：
location /h5 {
root /Users/admin/www;
index index.html;
}
不一样的地方是，当有前缀时，实际的访问路径会变成 root 路径加上前缀。所以这里，root 会去掉 /h5 。
如果不想加上前缀的话，那可以使用 alias 指令 :
location /h5 {
alias /Users/admin/www/h5;
index index.html;
}
通过 http://testhistory.com/h5 访问时，可以看到index.html是访问对的。
但是js和css访问有问题的，那是因为静态资源实际是在h5目录下的，而在打包出来的index.html中引用的资源没有带上h5前缀。
很简单，只需在 vue.config.js 中配置上公共资源目录：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/h5/'
: '/',
outputDir: 'h5', // 加上这个配置，让打包出来的目录由默认的dist改为h5，方便写部署脚本
...
}
除了 js、css 公共资源目录，还有路由配置也要增加基本前缀，为了保证前端路由和服务器的一致：
const router = new VueRouter({
base: 'h5',
routes
})
这时候再去访问http://testhistory.com/h5就无问题了。
使用root还是alias
刚才提到这两个指令都可以，那什么时候使用呢？
- 当无前缀时，使用root和alias一样，一般使用root;
- 当有前缀时，如果前缀名和目录路径最后一段路径一致，那应该使用root，而不一致的话，应该使用alias.。
History模式
要开启 History 模式，vue router 的配置很简单，只要加上下面一句话：
mode: 'history',
开发时访问是正常的，但当打包部署后，会发现当：
- 访问http://testhistory.com/h5，正常的；
- 然后跳转路由到http://testhistory.com/h5/about，也是正常的；
- 刷新http://testhistory.com/h5/about，就报404了。
try_files
为什么会出现这种情况呢？因为刷新时时通过 nginx 去访问静态资源的，明显这个路径是找不到，因为这个只是前端路由。为了解决这个问题，我们需要当访问的是前端路由时，去访问 index.html 这个主入口，再由前端路由自己来访问到对应的页面。而 nginx 就会用到 try_files 这个指令。
先来看看加上 try_files 后的配置：
location /h5 {
root /Users/admin/www;
index index.html;
try_files $uri $uri/ /h5/index.html;
}
配上后，就能正常访问 http://testhistory.com/h5/about 了。
我们看看 try_files $uri $uri/ /h5/index.html 做了什么，找到官网的语法：
try_files file... uri
这个语法的意思是：
- try_files后面可以定义多个文件路径和最后一个作为内部跳转的uri，其中文件路径是和
**alias**和**root**两个指令合在一起构造而成； - 多个文件以第一个找到的文件作为请求；
- 而文件后面以"/"结尾，会检查目录是否存在；
- 当文件都找不到时，就会去以最后一个uri进行内部跳转请求。
以我们例子为例：
- 我定义了
try_files $uri $uri/ /h5/index.html，root是/Users/admin/www； - 定义了两个文件，$uri和$uri，我的访问路径时http://testhistory.com/h5/about，
$uri是/h5/about，那么加上root作为根目录不能找到 ，$url/也不能找到对应的目录； - 文件找不到了，那么就内部跳转到
/h5/index.html，就相当于内部去请求http://testhistory.com/h5/index.html对应的文件资源，那前端接收文件资源后，就会根据路由自行跳转到对应的页面了。
总结
- 通过配置History模式，我学到了：**root和alisa的区别、index指令、try_files指令和
- nginx 指令是很多的，需要理解的话，需要去官网逐一查询并组合尝试，通过实际使用场景去学习，会理解得更透彻。
