Vue打包后接口访问报错，配置反向代理

问题：

项目本地运行正常，打包部署后，接口报错，指向index.html，如下：

We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.

image.png

原因：

跨域问题，代理不可用

vue代理配置

解决：

在服务器端配置反向代理

本地服务器：xampp apache环境

1. 打开httpd.conf
   去掉前面的 # 号开启下面几个模块：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_modulemodules/mod_proxy_connect.so
LoadModule proxy_ftp_modulemodules/mod_proxy_ftp.so
LoadModule proxy_http_modulemodules/mod_proxy_http.so

2. 配置代理，打开httpd-vhosts.conf
   在配置的域名下添加代理，如下：

<VirtualHost *:80>
    ServerAdmin test
    DocumentRoot "D:/xampp/htdocs/test"
    ServerName test
    ErrorLog "logs/test-error.log"
    CustomLog "logs/test.log" common
    ProxyPass /test http://test.abc.com
    ProxyPassReverse /test http://test.abc.com
</VirtualHost>

3. 刷新页面，正常了

   
   接口正常

参考文章：使用XAMPP配置Apache服务器反向代理