history模式 nginx配置_Nginx与Vue

这篇文章主要是在说两个内容：

    1. 如果编译后的vue不能通过 location / 来访问，必须通过 location /xxx 或者 location /xxx/xxx 这种方式访问，该如何配置vue和nginx。

    2. 如何解决nginx配置完vue后，除了首页内容，其他页面点击浏览器刷新操作会出现空白页面。

对于如何使用nginx作为服务器访问编译好的vue.js网上应该能找到一大堆，但是大部分都是C-C、C-V作品，略微浪费时间。本来我也打算从官网 (https://vuejs.org )C-C一个小例子出来，无奈找了10来分钟硬是没找到。有兴趣可以去试下看能不能再10分钟之内找到如何与nginx搭配使用。官方文档地址：https://cn.vuejs.org/v2/guide/installation.html

这个真是有点嘲讽了。。。。

既然官方故意搞个这么难找，那没办法我们只有自己造轮子了。

首先要明确的是，我们一般使用vue-cli构建vue项目。vue-cli不是本文重点，自行了解。

在我们写完vue.js代码之后，会将代码编译。一般执行如下命令：

npm run build  (如果使用yarn另说，本文以npm为例)

编译完成后会在项目根目录(src所在的目录就是根目录)生成一个dist文件(前提是你不对webpack编译做改动)

dist文件中会生成一个index.html和static文件，static文件中存放的是js和css。我们使用nginx进行访问的也就是dist文件中的内容。

下面来看一个简单的配置。

正常情况下nginx配置一个location即可。即：

location / {    root   /xxx;       index  index.html;         try_files $uri $uri/ /index.html; }

root指向的是nginx当前这个location要访问的目录。如果你按照上述配置nginx之后，那你在浏览器中应该直接输入 http://host:port   host是域名、port是端口号(如果你的端口号是80，那在浏览器中可以不用写port，即http://host )。

如果事情都是这么简单就好了，但这个世界就是会因为一些各种原因的历史问题，导致我们不得不调整我们自己去适应。

我现在接手的这个项目是略微费劲的。我们的线上服务需要先通过别人站点的转发来到达我们自己的入口页面，但由于历史原因我们之前的代码是PHP+HTML，即前后端代码糅合在一起的。现在我们通过vue将后端代码剔除了，然后又将一部分PHP改用了Java来实现。但是我们的PHP服务还有一些老的数据在用，暂时无法下线。瞬间感觉这个世界充满了恶意。。。。

鉴于此，我们只能保留PHP的入口来下发vue编译后的index.html和static文件。具体就是当别人站点跳转到我们站点的时候我们以PHP中的一个入口方法来接收(基本PHP框架都会有一个这种方法)，然后将这次请求重定向到vue编译后的index.html和static文件。如何重定向呢？那就要在nginx中配置了。

扯了这么多，感觉好像跑题了，权当吐槽吧。

我们还是回到主题吧?。

正常情况下的nginx配置我们在上文中已经介绍过了，下面我们来看看不正常的配置。

我们来看下编译配置中几个比较重要的属性

如图build中的属性即使你在执行npm run build时候为什么会生成一个叫dist的目录，为什么会生成一个index.html和一个叫static的文件。注意新的编译配置可能和我截图不一致，但是其assetsRoot、assetsSubDirectory、assetsPublicPath 这几个属性还是一样的。这几个属性即是我们配置nginx是最需要注意的属性。

比如说我们的需求不再是直接访问 http://host 而是要输入http://host/test/v1/ 来访问站点首页。那我们如何配置呢？

这种情况下我们要修改 assetsPublicPath 这个属性，即将其值设置为 /test/v1/，此时你可以打开看一下编译好后的index.html，在里面会访问static中的js和css，访问方式变成了/test/v1/static/xxxx 。(明白了吧，这个 assetsPublicPath 的值就是你访问js和css文件的地址)然后如果你使用了vue-root 作为路由插件也要将其base属性设置为 /test/v1/ 这样你才能正确的跳转到其他页面(此处vue-root使用的是history模式，如果你硬要使用hash模式，那就不要浪费时间看这篇文章了，这病我救不了?)。

vue的编译配置这样就配置结束了，接下来是nginx的配置。如何配置nginx呢？

前文说过，正常的nginx配置就是简单的一个 location，但是我们现在改了 assetsPublicPath 这个属性的值，那我们就需要对nginx做点修改。首先我们需要单独加一个location来访问static文件。可以这样写

location /test/v1/static {    alias /xxx/test/v1/static/;}

前文说了，我们打开编译后的 /dist/index.html 后会看到js和css静态文件的访问地址，这个新配置的 /test/v1/static 即是将所有访问 host/test/v1/static 的请求，都指向 /xxx/test/v1/static/ 这个服务器路径去寻找js和css静态文件。

除此之外我们还要修改原有location，我们的原有location是这样的：

location / {    root   /xxx;       index  index.html;         try_files $uri $uri/ /index.html; }

我们要将其改为

localtion /test/v1 {    alias /mmm/;   # "/mmm/" 就是你编译后的index.html的所在目录    index index.html;    # 此处不再是单纯的index.html, 如果是单纯的index.html,那你除了首页之外的其他页面只要一点浏览器的刷新就会白屏?(这里也是为啥网上会有人问nginx+vue除了首页其他页面刷新后什么都没有的原因)    try_files $uri $uri/ /test/v1/index.html;  }

至此，我们算是终于配置完了，撒花。

明明可以通过很简单的配置就可以完事，但由于种种原因导致配置绕来绕去。

不知道这算是好事还是坏事呢。

正如我们的生活，往往很简单的事情，有时候总被我们人为的搞的很复杂。

这到底是幸运还是不幸呢。

我们都身处在这样一个复杂的社会中，很想坚持做自己，但大多时候我们又会无能为力的选择妥协。

记得罗翔大律师说过的话：我们读书可以不是为了炫耀，可以不是为了功利，我们读书是希望当我们的人生跌入低谷时仍会有勇气去面对这一切。

罗曼·罗兰：

There is only one heroism in the world : it's to see the world as it is, and to love it.