vue3.0打包到服务器踩坑——代理转发

代理转发

问题：在本地运行vue项目和打包到服务器时，统一接口位置

解决：1、本地运行时，在根目录创建 vue.config.js 文件，填入以下代码，该配置只在本地运行有效，由运行的node服务器进行代理转发，以下代码表示将所有发送往 /api 的请求转发到 https://api.XXX.com

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://api.XXX.com/', //对应自己的接口
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

2、当使用npm run build打包，部署到服务器上后，没有nodejs运行，自然会失效。需要配置服务器进行转发，下面是Apache配置。

找到站点配置文件

若网站使用http协议，在 <VirtualHost *:80> 标签内添加 ProxyPass /api http://api.XXX.com/

若网站使用https协议，还需要开启 ssl 允许转发，在 <VirtualHost *:443> 标签内添加 

ProxyPass /api https://api.XXX.com/
SSLProxyEngine on