《vue》设置代理服务器devServer 的 proxy

在开发环境，vue-cli 会帮我们创建一个开发服务器( http://localhost:8080 )，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素：域名、端口、协议其一不同。

完整的请求地址：

我的这个地址，里面本身就携带有 api 字段的

利用 vue-cli 中的 devServer 配置

记住，如果你的地址没有类似我那个地址那样，有个 api 作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。

一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、等其他资源都是远程返回的。。。

用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：

然后开发阶段，你的一些ajax的请求的 url 就会匹配到 /api 开头，设置 proxy了

千万不要这么设置：

看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）

实际上，这里是看不到的。。

因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。

可以这么理解：本地服务器将F12的这个请求拦截了，然后自己偷偷改掉 url，再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚，解决了跨域问题！

本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。

如何打包

基于Vue-Cli,通过npm run build来进行打包的操作

如何部署

将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和indexhtml文件，可以直接将这两个文件扔到服务端

但有时候，我们会直接将dist文件扔到服务端

出现的问题

打包到服务器后，出现资源引用路径的问题

打包到服务器后，出现空白页的问题

打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题

打包到服务器后，出现路由刷新404的问题

下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验，来告诉大家如何解决这些问题。

一、前端配置：

①、router配置--指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以要指定router的base)

router

提前和后端商量好项目部署的服务器文件夹路径

②、编译打包配置

进入config --> indexjs

build

③、使用npm run build进行打包，至此前端能做的配置已经做完

二、后端配置：

路由跳转出现404，主要原因是后端对这个虚拟的前端路由没有做任何处理，服务器在找不到指定路径下的资源时，只能向客户端返回404。

解决办法(Apache)：进行url重写 --- 将Vue项目所在服务器文件夹下的路径，例如：

leibogroup/pcMall/ 重写为 leibogroup/pcMall/indexhtml

hatccess

具体的Apache开启allowoverride ，url重写，后端分分钟就解决了

如果是其他类型服务器

请自行参考https://routervuejsorg/zh-cn/essentials/history-modehtml

总结：在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更，

vue-element-admin为基于vue和element的一个著名的后台管理系统。

笔者想在本地中将项目跑起来，于是按照下面的命令将项目启动

环境：linux cenos

git clone https://githubcom/PanJiaChen/vue-element-admingit

cd vue-element-admin

npm install

npm run dev

然后提示启动成功。

但是在浏览器访问该服务器的ip地址+端口发现无法访问

然后在服务器上curl 该ip地址+端口可以得到结果。

但是该服务器其他服务均运行正常。

此时我按照网上的说法将webpack中的devServer的host改为‘0000’，再次启动发现不起作用。

然后我在packagejson中将script中的内容改为：

然后再次启动项目

访问地址发现可以访问成功。

原因：初步猜测是端口没有开放的原因。