vue打包完接口路径api没有了怎么办

PHPz 原创: 2023-04-13 13:48:12 769浏览

随着前端技术的不断发展，前端框架也在不断地改进和优化。目前比较流行的前端框架之一是Vue，Vue具有轻量级、易学易用等特点，受到了广大开发者的青睐。但是在使用Vue过程中，有些开发者遇到了一个问题：打包完之后，接口路径(api)消失了。那么问题出在哪里呢？

问题描述

在开发过程中，我们会使用到接口路径，比如：

const url = '/api/user/login';

当我们将Vue项目打包之后，可能会发现接口路径(api)消失了，比如：

const url = 'user/login';

这就导致了请求接口失败。

问题原因

这个问题的原因是由于Vue采用了webpack进行打包，而webpack的打包方式是将所有的资源都进行了打包和压缩，包括JS、CSS、图片等等。

我们可以看一下Vue项目中的vue.config.js配置文件：

module.exports = {
  // 配置打包和部署的根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '//m.sbmmt.com/m/',
  // 打包时不生成.map文件，加快打包速度
  productionSourceMap: false
};

其中，publicPath是我们在打包之后使用的路径。在开发环境下，我们使用的是/，表示根路径；而在生产环境下，我们使用的是./，表示相对路径。

由于我们的接口路径(api)是绝对路径，因此在打包时，接口路径(api)就会被打包成相对路径。这样就导致了接口路径(api)消失的问题。

解决方法

针对这个问题，我们可以采用以下几种方法进行解决。

方法一：使用绝对路径

我们可以将接口路径(api)改为绝对路径，即添加域名前缀，如：

const url = 'http://localhost:8080/api/user/login';

这样，在打包时，接口路径(api)就不会被打包成相对路径了。

方法二：配置代理

我们可以在vue.config.js配置文件中添加代理，将接口路径(api)转发到目标地址。在开发环境下，我们使用的是开发服务器，这个开发服务器本身就是一个代理服务器，我们可以利用这个代理服务器进行转发。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标地址
        changeOrigin: true, // 是否改变原始地址
        secure: true, // 是否使用https
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
};

配置好代理之后，我们在代码中请求接口时，只需要写相对路径，如：