六、项目发布-- 1.Vue项目构建

接下来做项目的构建以及上线发布，包括后台API的编写

首先做项目的构建

项目是已经开发完成了，接下来做构建工作

1.先做线上配置文件

怎么构建，我们看.env.develement这个文件，这个文件主要是在开发环境下使用，那么在上线之后，我们需要有一个同样的环境变量文件叫.env.producation，我们先把.env.develement文件中的内容复制到.env.producation中，因为我们上线后的接口和未上线是有一些区别的，下面我们在.env.producation中做一些替换，把地址都替换成线上的地址，目前这个服务器是别人搭建的一个服务器，先用来做测试，后面我们会尝试如何自己搭建服务器并且作用域名来搭建一套自己的服务器

如下，这样的话我们整个上线的配置就做好了，所有的API和资源全部是从线上获取的，所以我们第一步就先把配置文件改成这样

2. 接着我们做构建

把项目停掉以后，我们运行npm run build，因为我这个项目目前开发的有一定复杂度，所以构建过程会比较长，构建完了以后，它会在项目中生成一个dist目录，dist目录里面就是一个打包好的文件

出现问题，说俺什么非法使用目录啥的

找了好久都没有解决，孩子都快emo了，然后尝试着修改了一下，从true变成false

发现可以build了，呜呜呜

但是虽然能build了，但是我不理解其中缘由，这个属性是为了解决浏览器兼容的问题，build跟这个有啥关系啊，为啥true就build不了。如果为true，那么在低级浏览器范围内，会把node_modules里用到的高级语法进行babel编译；如果为false，则会把node_modules里用到的高级语法原封不动打包，会造成在低级浏览器访问报错的情况。后来我直接把这行transpileDependencies:；代码删掉了，也能npm run build成功，我还是删了好，置为false担心引起哪里出现问题。

收，继续往后走

然后直接打开dist当中的文件看能不能访问，如下双击打开index.html

发现出现问题，即书架中没有加号分组，就无法点击加号分组加入书架

这是因为接口请求，它一定要替换界面的BASE_URL，然后找到.env.production上的BASE_URL这个地址，而现在没有找到这个地址，说明环境变量没有替换成功，这是做环境变量替换时出现的问题，为什么这个线上环境build都没有报错咋不行呢，尴尬了，因为我写错名字了，文件名叫.env.production而不是.env.producation，改回来后重新npm run build即可，重新加入dist的index.html中即可出现如下，只是这里这个分组样式有点怪怪的，咋没有方框了啥情况

然后点击加号即可进入到书架中

此时我们点击阅读的时候，发现出现问题。爆出404错误，表示没有找到资源，也就是没有办法通过这个路径找到资源，那一定是资源出问题

我们看production中看，我们配置了EPUB的路径，前面是IP地址http://47.99.166.157后面是一个epub再往后就是我们分类名+电子书名称了，而报错中是IP地址+book/res后才epub，说明我们路径写错了

然后回到eBookReader当中：看看如下，之前我们写路径的时候没有使用EPUB_URL，我们应该把它改为EPUB_URL，所以修改如下

然后重新npm run build，进入dist的index.html中某本图书阅读即可展示出来了如下

3. 紧接着我们把我们构建好的项目放到nginx上试一试

即如下，拷贝dist下的文件，然后到sresoure中创建一个book文件夹，然后放到这个文件夹下

拷贝过来后我们就不是直接打开了即不是直接点击这里的index.html打开了，而是在nginx上面打开，如下，如果8081来打开

然后找到book目录，点击book目录，即可打开书架了，如下

然后去点击阅读图书，把图书加入到书架中都可以实现

那这样的话，我们初步可以判断现在这个包可以处于上线状态，它基本没有太大的问题了，就是book下面的那些文件就是我们最终上线的前端部分的内容，后面我们就把这些文件发布到我们线上，但是在此之前我们还有一件事要做，就是在我们配置文件.env.production中目前所有的这些API都不是自己做的API，那么现在我们要自己去实现一套这样的API，我们所需要实现的API主要是api中store.js提供的那些API。那么我们需要采用从数据库中获取数据并且返回的这样的方式来实现

补充一下之前图书详情页的将图书加入到书架的逻辑：

如下看该电子书是否存在于书架中，如果存在于书架中那么此时是要移出书架，移出后把数据保存到localstorage中；如果该电子书没有存在于书架中，则把该电子书移到书架中并且移到后把数据保存到localstorage中。

addToShelf中是先从书架中的图书，然后把最后那个加号方框去掉，然后最后是会加回去的，然后将这本书的type置为1.然后在书架列表数据shelfList中把这本书添加进去，然后重新运算一下item的id们，最后把改变后的shelfList存到localstorage中。