记一次VUE项目在nginx上的部署经历
由于最近的项目需要全栈，其实接触vue有一段时间了，但至今仍然感觉是个小白，所以想借这次在nginx上部署vue项目的机会，给前端相关的博客开个头，可以从平时的总结中积累。
首先当然是npm run build打包项目，生成static文件夹和index.html文件。
然后一顿百度nginx如何部署vue项目，做做准备工作，过程中看到不少文章写需要将打包模块build中assetsPublicPath改一下，原来默认是这样的：
将'/'改为'./'， 后来知道我这次部署是不需要改的，解释一下。vue项目打包后，index.html中所有的js引用路径将以这个assetsPublicPath属性值作为前缀，比如assetsPublicPath为默认值，index.html中js引用路径即：
如果将其改为'./'，则引用路径变为：
如果部署的时候static文件夹和index.html文件都是直接在根目录下，那么就不需要改，因为根目录下'/'和'./'是没有区别的，那什么叫直接放在服务根目录下呢，这就需要介绍部署的时候nginx的配置。
nginx的配置还是挺简单的，先贴代码：
想象一下有一堆静态资源文件，现在需要通过nginx访问它们，也算是一个服务了，所以需要加一个server模块。既然需要访问那得有个访问入口吧，配置一下server_name服务地址和listen监听的端口号，这个和nginx的反向代理配置一样。有访问入口了那得有地方放这些静态资源文件吧，不然去哪里找，就在location里面配置，里面的root配置的就是上面说的服务根目录，放文件的地方，这次部署的时候我就把static文件夹和index.html直接放在/hik/app/vue/dist下面了，所以不需要改。如果你非得在dist文件夹下加一个文件夹，再放里面，那就需要将assetsPublicPath的值'/'改为'./'，一个绝对路径一个相对路径，不在根目录下是不一样的。最终的目的就是index.html中能不能引用到static文件夹里的东西。
配置nginx的时候还有一个需要注意的地方，就是最下面两个location的路由代理配置，这是因为vue项目中访问后台接口肯定是跨域的，因为后台服务端口是81不一样，如果不配置代理，就会用前端的83端口去访问，这肯定不行，所以将指定的路由请求代理到后台服务地址上去，这个配置就相当于dev模块里的proxyTable，如图：
dev是开发环境，这里也是将路由代理到后台服务中去。
自以为部署好了，开心的一运行，结果页面上其他css都好好的，偏偏element的图标不见了，类似这样：
网上百度了一通，找到了解决办法，原文地址：https://blog.csdn.net/weixin_43778272/article/details/100091826
找到build文件的utils.js，在里面加上这么一行：
具体原因可参考上面地址。
以上是 记一次VUE项目在nginx上的部署经历 的全部内容， 来源链接： utcz.com/z/375840.html
