我们知道，vue 单页面应用打包出来是静态资源，一般需要 nginx 或者其他服务器访问；当如果 Vue Router 是采用 History 模式时，又会有额外的配置。这里记录一下完整配置过程中的每一个细节。

静态资源

我们首先要配置好如何访问我们打包出来的静态资源。

基本配置

当 URL 无需前缀时，基础的配置是这样的：

  1. server {
  2.     listen       80;
  3.     server_name testhistory.com;
  5.     location / {
  6.       root /Users/admin/www/h5;
  7.       index index.html;
  8.     }
  9. }
  • root：静态资源的位置
  • index: 可以通过index来访问index.html，而index一般是可以省略的

然后配置上 Host：

  1. 127.0.0.1 testhistory.com

就可以通过 http://testhistory.com 就可以访问到页面了。

带前缀的访问路径

有时候，同一域名下有可能多个不同的前端服务，这时候我们会通过前缀告诉 nginx 加载或者反向代理到对应的资源（比如说我司的不同城市业务对应的前端项目就不一样）。

带前缀的静态资源配置：

  1.     location /h5 {
  2.       root /Users/admin/www;
  3.       index index.html;
  4.     }

不一样的地方是，当有前缀时，实际的访问路径会变成 root 路径加上前缀。所以这里，root 会去掉 /h5 。
如果不想加上前缀的话，那可以使用 alias 指令 :

  1.     location /h5 {
  2.       alias /Users/admin/www/h5;
  3.       index index.html;
  4.     }

通过 http://testhistory.com/h5 访问时，可以看到index.html是访问对的。

但是js和css访问有问题的，那是因为静态资源实际是在h5目录下的，而在打包出来的index.html中引用的资源没有带上h5前缀。
image.png
很简单，只需在 vue.config.js 中配置上公共资源目录：

  1. module.exports = {
  2.     publicPath: process.env.NODE_ENV === 'production'
  3.     ? '/h5/'
  4.     : '/',
  5.     outputDir: 'h5', // 加上这个配置，让打包出来的目录由默认的dist改为h5，方便写部署脚本
  6.     ...
  7. }

除了 js、css 公共资源目录，还有路由配置也要增加基本前缀，为了保证前端路由和服务器的一致：

  1. const router = new VueRouter({
  2.   base: 'h5',
  3.   routes
  4. })

这时候再去访问http://testhistory.com/h5就无问题了。

使用root还是alias

刚才提到这两个指令都可以，那什么时候使用呢？

  • 当无前缀时，使用root和alias一样，一般使用root;

  • 当有前缀时，如果前缀名和目录路径最后一段路径一致，那应该使用root，而不一致的话，应该使用alias.。

    History模式

    要开启 History 模式，vue router 的配置很简单，只要加上下面一句话：

    1. 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 后的配置：

  1. location /h5 {
  2.   root /Users/admin/www;
  3.   index index.html;
  4.   try_files $uri $uri/ /h5/index.html;
  5. }

配上后，就能正常访问 http://testhistory.com/h5/about 了。

我们看看 try_files $uri $uri/ /h5/index.html 做了什么，找到官网的语法：

  1. try_files file... uri

这个语法的意思是：

  • try_files后面可以定义多个文件路径和最后一个作为内部跳转的uri，其中文件路径是和 **alias** 和 **root** 两个指令合在一起构造而成；
  • 多个文件以第一个找到的文件作为请求；
  • 而文件后面以”/“结尾，会检查目录是否存在；
  • 当文件都找不到时，就会去以最后一个uri进行内部跳转请求。

以我们例子为例：