Vue打包+nginx部署躺坑记

经过我长达接近一周的掉头发，心酸历程如下：

以下均为vue打包生成，dist文件夹，里面有index.html文件和static文件夹

然后通过nginx进行部署

坑1：项目部署后，访问网站，页面404

坑2：项目部署后，访问网站，页面403

坑3：项目部署后，访问网站，页面400

坑4：项目部署后，访问网站，静态文件（css，js，img）无法加载，404

坑5：项目部署后，访问网站，页面请求接口404

坑6：项目部署后，访问网站，进入详情页，再刷新后页面空白，或访问直接通过url地址访问详情页的时候页面空白。

总共6大坑，让我掉了无数头发，总结如下几点：

1、请注意include /etc/nginx/default.d/*.conf;这里的优先级，优先级，一定要注意这个

2、要注意server里面root后面的路径要正确，location后面的路径要根据vue配置的实际情况来，相关注意事项，网上一大把

3、http和https共存的，这里的情况有点复杂，我和部门负责人研究了整整一下午，除了这个，剩下的坑都是我自己躺。

4、vue中vue.config.js配置文件的publicPath设置，要注意是设置成/还是./还是static还是其他，可以网上找教程，根据自己需求来

5、路由的history模式和hash模式，设置为hsitory模式后，通连接访问或者刷新会页面空白，只需要将publicPath设置为/即可，当然，如果你做了其他奇奇怪怪的设置，也许这个方法对你并没有用，不过万变不离其宗，相差也不会太多。