vue项目中怎么在vue.config里面的devserver中配置跨域问题

你可以在vue.config.js文件中的devServer属性中配置跨域问题，具体方法如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 假设需要跨域的接口前缀为/api
        target: 'http://localhost:3000', // 目标地址
        ws: true, // 是否启用websockets
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 去除接口前缀，将/api转成空串
        }
      }
    }
  }
}

以上代码表示将本地的/api接口转发到http://localhost:3000上，同时启用websockets和跨域，去除接口前缀。

相关问题

访问192.168.1.56跨域后怎么在vue.config文件里面的devserver里面配置跨域

对于您提出的问题，我可以为您提供以下回答：

您可以在vue.config.js文件中的devServer配置中添加如下代码：

devServer: {
    port: 8080, // 端口号
    proxy: { 
      '/api': {
        target: 'http://192.168.1.56', //跨域接口的地址
        changeOrigin: true, //是否跨域
        secure: false, //是否使用https
        pathRewrite: {
            '^/api': '' //重写接口
        }
      }
    }
}

这里的配置是将以”/api”打头的接口请求都转发到http://192.168.1.56下，并去掉”/api”前缀。在实际使用中，您需要根据您的实际情况进行修改。

vue.config.js devServer 配置信息

在Vue项目中，可以通过配置vue.config.js文件来自定义webpack的配置信息，其中devServer字段用于配置开发服务器的相关选项。下面是devServer常用的配置选项：

1. `host`：指定开发服务器的主机名，默认为`localhost`。
2. `port`：指定开发服务器的端口号，默认为`8080`。
3. `https`：指定是否使用HTTPS协议，默认为`false`。
4. `open`：指定是否在启动开发服务器后自动打开浏览器，默认为`false`。
5. `proxy`：用于配置代理服务器，解决前端开发中的跨域问题。可以是一个对象或者一个函数，具体配置方式可以参考官方文档。
6. `before`和`after`：用于在开发服务器启动之前或之后执行自定义的中间件函数。

下面是一个示例的vue.config.js文件，展示了如何配置devServer：

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    before: app => {
      // 自定义中间件函数
    },
    after: app => {
      // 自定义中间件函数
    }
  }
}

以上是devServer的一些常用配置选项，你可以根据自己的需求进行配置。