关于Vue - Webpack 项目打包出现的一些问题

目前项目打包过程中出现了一些错误，折腾了一会，通过查阅资料解决了次相关的问题，特此记录。

assetsPublicPath: '/',

1、 为什么要开启？

首先，你的网站首页，域名后跟着一个大大的#，太难看了！跟开发他美丽帅气的程序汪完全不搭。

其次，官网上人家尤大大说了：“ history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。”

怎么理解呢？举个常见的场景说，就是如果你开发的是手机端应用，你从主页点击进去新闻列表，此时你看完新闻，想要回到首页，按以前的想法，那就是一个href重新打开首页呀。然后首页重新加载js,向服务器请求新闻列表,等等这些初始化的工作，都要重新做一次。对于用户而言，这个过程慢、费流量，用户体验其实是不好的。

而html的history模式，就能够让你从新闻详情页跳转到首页，不需要再次进行数据的初始化了。当然，这可能需要配合vuex来进行了。

2、 在哪儿开启？

在你的实例化Router的时候配置开启即可:

const routers = new VueRouter({
  routes: router,
  mode: 'history'
})

3、 开启后还需要做什么？

如果是本地环境的话，啥也不用做，直接就可以访问了。

但如果需要部署到服务器上，还需要在服务端进行修改。详细介绍vue官网上其实有介绍 —— history-mode模式介绍。

也就是，在服务端配置一下就行了。为什么要配置呢？
假如你的项目已经部署到服务器上了，并且服务端没有进行任何配置。此时你访问80端口首页，比如idays.cc,依然是可以正常打开的，但真的没有问题了吗？

必须有问题啊。你随便进入一个除了你项目的首页之外的一个地址，比如 idays.cc/article/detail/5 ，然后点击浏览器的刷新按钮。你会发现，唉？？怎么404了？

原因就是：

1. 对于正常的网站，假如有一个路径为www.idays.cc/article/detail/5页面。

2. 原来的hash模式，自动加了一个#,也就变成了www.idays.cc/#/article/detail/5，而服务器无法识别url中的#后面的部分，所以，无论#/后跟的是什么，都统一被识别为idays.cc，也就是相当于你请求的实际上就是你项目下的index.html，然后等到html中的静态资源加载完成，其中的某个js再获取到URL中#后面的部分，进行项目内部的路由跳转，于是跳转到了你想要去的article/detail/5页面。

3. 而对于history模式而言，没有了#，对于服务器来说，域名之后的数据，比如article/detail/5，就是真实的路径。所以当你直接访问www.idays.cc的时候没有任何问题。但是当你直接访问www.idays.cc/article/detail/5，服务器就真的会去查找/article/detail/下的资源。那肯定找不到呀，因为你的index.html根本就不在/article/detail/下呀！没办法，只能抛出404错误啦。

所以嘛，老老实配置一下你的服务器吧。我前置服务器用的是Nginx,修改下配置，在你原来相关节点的配置后面加上try_files $uri $uri/ /index.html就可以啦，然后relaod即可。

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

这个配置的作用是什么呢？单从我上面的贴出配置而言，就是当你访问你的域名的时候，服务器找不到相关资源的时候，最后就会返回你这个项目中的index.html。

此时有一个问题，如果这台服务器我部署了好几个项目，一旦出现404，是不是全都跳到这个vue项目里来啦。。。
事实的确如此。此时你可能考虑换一下端口，或多增加一些其他配置了。

4、 还可能存在什么问题吗？

其实不好说，不过我就碰到了，上网找了半天，找不到答案，于是只能自己尝试解决。

这个问题可能不是每个人都会遇到。

问题是这样的，我是从原来的hash模式转到history模式的，router和服务端的配置都修改了，但是，当我直接打开www.idays.cc/article/detail/5的时候，网站根本打不开，调出开发者工具发现控制台报错了。

“喵的，怎么js和css都加载失败了！”

仔细一看，js的加载地址居然是www.idays.cc/article/detail/js/XXXX.js，服务器肯定是404找不到啊，但是因为我们刚才在服务端配置了新东西，一旦出现404，就返回一个index.html。所以，你浏览器请求的js/css实际上都变成了index.html。

浏览器：”我要这个js”。
服务器：“找不到唉，给你个html算了”。
浏览器：’都什么鬼？’。

所以你的控制台就报错了。

这时候，你再看一下你的index.html.

发现了吗？src下是一个相对路径，也就是你请求地址的倒数第二层，也就是在www.idays.cc/article/detail往后拼接/statiscs/js/XXX.js。

为什么呢？如果你原来用过hash模式，并且是用vue-cli生成的项目，部署到服务器会找不到静态资源，还有印象吗？这时候，你在config/index.js中将assetsPublicPath原来的’/‘修改为‘./’。

而这时候你换了history模式，静态资源的引用还是./，所以就出问题啦。这时候只需要重新将./改成/，然后再重新打包上传，就可以啦。

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'statics',
    assetsPublicPath: '/',
......

参考引用：http://idays.cc/article/detail/9