Vue项目打包后Proxy失效的问题
在vue.config.js中配置了proxy跨域后执行npm run build打包部署到服务器上会报跨域问题,为什么会报错呢?因为编译打包后,前端页面成为了单独的静态资源,代理服务器devServer.proxy被抽离出去了。也就是说,devServer.proxy不会一起打包到dist文件夹下,所以相当于我们没有配置代理服务器!!
怎么解决呢?资源要被访问,那必须要有一个代理服务器来装载它。我们部署上线最常见的就是使用nginx进行反向代理,只需要修改nginx配置文件即可。示例如下:
第一步: 首先去下载一个Nginx,linux系统就下载后缀为tar.gz的,windows系统下载后缀zip的就行。下载完成后解压出来,将VUE打包的dist文件夹放到nginx里的html文件夹下。然后再找到nginx里的conf文件夹,然后选择对nginx.conf进行编辑。
server {
listen 8080; #用于监听的端口,配置为原vue项目启动端口
server_name localhost; #nginx拦截的地址,也可使用通配符拦截(具体百度用法)
第二步:然后往下拉找到 location /,这一步是拦截具体的地址如:localhost:8090/
location / {
root html\dist; #该路径就是之前放置Vue包的路径,根据你的项目实际路径来配
index index.html index.htm; #跳转的欢迎界面,根据你的项目首页来配
}
第三步:然后是最重要的一步,将ProxyTable里的请求地址配到nginx里
location /apis/ {
proxy_pass http://127.0.0.1:8090/;
}
这个apis是Vue中配置的代理路径,将下面proxy_pass路径改为ProxyTable中的target路径,即可解决部署项目前端网页请求接口报错原因