关于Vue打包发布的问题

项目完成之后，发现打包发布以后，在wamp配置完成以后，访问首页和主题页都没有问题，当进入详情页以后，页面空白，控制台也没有报错。于是开始查找问题。

一 : 如果你的项目路由vue-router使用的是history模式，当将项目放到服务端的时候，后端需要做相应的配置（见官方文档）。如果是传统的hash模式则万事ok。（我在本地使用的是apache,配置文件如下（注意：默认是放在根目录下面））说明一下：如果你使用的是history模式，你会发现将项目布置上去以后，刷新会返回404... 而且一些路径根本就找不到。出现这种情况的原因是 vue-router设置的路径不是真实存在的路径，访问的资源在服务端找不到...  所以需要后端返回一个找不到对应路径返回index.html(也就是Spa单页应用的入口)。由于这样，前端最好添加一个404页处理找不到的路径

.htaccess文件

二: 后端配置完成以后，将项目放上去以后，首先你确定项目是放到根目录还是二级目录（...）。如果是在根目录下，vue-cli默认的配置基本可以满足需求。下面是可能出现的问题

1、背景图片加载路径出现错误。（首先检查output.publicPath是‘/'还是‘./’, 如果出口路径是根路径，则不会出现这个问题，因为最终访问的是/static/img/xx.jpg;如果output.publicPath是‘./’，则最终的引用路径就变成了'static/img/xxx.jpg',在css文件夹中根本访问不到这个路径，所以就会出现下面这个清况）解决方法：在build/utils.js文件中添加以下代码。出现问题的原因是因为背景图片写在css文件中，它并不会和vue文件一样是由index.html开始访问的。但是css访问static/images/xxx.png是访问不到的。所以添加publicPath将路径回退两层以后就是‘../../static/images/xxx.png’（看不懂的可以看一下你们打包出来的文件夹目录就懂了）

解决背景加载路径错误问题办法

2、如果，因为某些原因，程序必须放到二级或是更深的目录下面，你会发现将项目放上去以后，会出现引用路径错误。下面以我本地布置到二级目录为例子说明一下原因及解决办法

        我将项目布置到/app/下面，相应的需要修改几个地方

        (1) 、首先路由配置文件中添加base : '/app/',修改应用的基路径。

      （2）、修改config/index.js文件（见下图）解释一下：assetsPublicPath这个东东就是你打包以后引用文件的基本路径（vue-cli）默认的是根路径/，如果修改为/aap/,你会发现在打包好的文件index.html中，所有的src引用、包括css引用都是从/app/开始的。因为你的项目是放在根目录下线的app目录中，所以引用要从/app/中才不出错，如果不修改怎引用还是/static/xxx.js，那肯定就报错了， 因为根目录下没有static，但是有app.(也不知道说明白了没。。。语言表达能力欠缺)

将根路径修改为/app/

            （3）由于项目发布在二级目录下，所以对应的后端在处理路径重定向的时候需要注意目录返回到层级。不能再是图一那样了，下面是修改后的，其实就是修改了一下返回到index.html的路径。

修改后的.htaccess文件

            一些建议：（前提：如果是项目放在根目录下的话）如果需要本地项目中保存一些背景图片的或是其他小图片，直接放在static文件夹中就可以了，在引用这些资源的时候直接将路径写成/static/images/xxx.png.这样的话，在打包好以后这些图片还是在static文件夹下，路径不会出现问题。原因是static文件夹会直接复制到打包好的文件中，其实就是将static中的文件移动到了打包好的static文件中。（详细请看vue-cli的配置）。包括其他的一些本地不需要变动的文件都可以放到static文件夹中。如果不想放在static中的话，也可以放到assets文件中，这时需要使用相对路径引用资源，img在打包好文件路径默认就是/static（output.publicPath是‘/’）文件下面的资源，是没有问题的；img在打包好文件路径默认就是static（output.publicPath是‘./’）文件下面的资源，背景图片就会出现问题，所以还是要配置untis.js文件。（如上图二）

            一些建议：（前提：如果项目不是放在根目录，例子是二级目录下）由于我之前写的项目是放到根目录中，所以都是按照上面的做法做的，但是需要把项目放到二级目录时， 出现了问题。由于我的img 包括背景图都是在static/imags中，所以我就是直接引用/static/images/,导致在放到二级目录中出现了找不到如片路径的问题。下面是我的解决办法

（1）、如果不嫌麻烦的话，在开发阶还是写成/static/images/xxx.png的形式，但是在打包前将所有引用的/static/images/全部替换为/app/static/images/。打包好就不会出现找不到路径的问题

  (2) 可以在引用的时候写成相对路径， 最好是写到assets/imags文件中(注意：不要放到static中，如果放到这个里面，img引用是不会改变的，打包好的文件会出现img路径还是/static/images或者是../static/images或者是‘./static/imagss’)。,如果是将图片放进assets/imags中的话，img引用是没有问题的，打包好的文件img的引用路径就是/app/static/imgaes/xxx.png。但是背景图还是找不到路径，所以要将上面的utils.js按照上图路径配置就没问题了。（别忘了啊啊啊啊）

也不知道写明白了没？？隔了半年了，再拿起来写还记得一丢丢。。。还是得多写笔记啊。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。（2018完了）