vueAdmin项目打包

人生的第一篇博客

记录在项目开发过程种出现的问题，若出现相同的情况可以快速解决该问题

在项目采取前后端开发时,例如（vue+springboot），最后前端工程要打包成静态文件资源给后端，然后后端控制路径进行资源映射，但在打包过程中，有可能会出现后端无法访问前端的静态资源或者前端请求后端无法接收到(404 not found)。

而我最近在使用 vue-admin-template这个项目模板，前期一切顺利，就是在最后打包的时候出现了上述的问题

一般出现这种情况的原因有两种：要么是前端出问题，要么是后端出问题。

而我接下来从前端的角度来分析造成这种情况的原因

对于前端来说，其实出现这种情况主要由两种原因早成的

1. 打包时项目的根路径没有和后端匹配（后端无法访问前端打包的静态资源）

   例如后端访问该静态资源的根路径是 ‘/mange/’,而前端项目的根路径是‘/’

2. 前端请求的根路径没有和后端接收请求的根路径匹配（后端无法接收前端发出的请求）

   例如后端接收前端请求的根路径是 ‘/mange/’,而前端项目的根路径是‘/’

一般这两个问题解决了，就差不多了。

但是如果还是后端无法访问前端打包的静态资源那或者前端请求后端无法接收到就有可能是后端出现了问题。

前端要和后端一起排查造成该问题的原因。

因为前端打包的工具其实是各种各样的，他们对于项目的根路径和请求的根路径的处理方式都是不同的，而我接下来则以我自身的例子（我这里是使用webpack4的，使用的项目模板是vue-admin-template）来看看具体如何解决上述情况

这是项目结构：

webpack打包会根据build/index.js进行打包,打包时的一些项目的相关配置都在build/index.js

但是我们对于项目相关配置的修改是在vue.config.js,因为build/index.js有些相关配置引用了vue.config.js的一些参数

接下来我来讲讲如何设置打包时项目的根路径和前端请求的根路径

执行打包命令：npm run build:prod（这命令本质是执行vue-cli-service build命令，这文件是package.json文件）

打包完成后默认在项目根目录下产生一个dist文件，静态资源都在这下面，然后把静态资源扔给后端就可以了

本人新人，这是本人的第一篇博客，或许写的比较乱

若有不足，请多多指教！

面，然后把静态资源扔给后端就可以了

本人新人，这是本人的第一篇博客，或许写的比较乱

若有不足，请多多指教！