若依前端用$.ajax调外部接口，url如何设置成默认vue.config端口地址加接口地址

若使用 Vue CLI 创建的项目，可以通过在 `vue.config.js` 中配置代理来实现将请求转发到后端接口。具体来说，可以在 `vue.config.js` 中添加如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端接口地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 将请求地址中的 /api 替换为空字符串
        }
      }
    }
  }
}

接着，在前端通过 `$.ajax` 调用后端接口时，只需要将请求地址设置为 `/api/xxx` 即可，如：

$.ajax({
  url: '/api/login', // 将请求地址设置为 /api/login
  type: 'post',
  data: { username: 'xxx', password: 'xxx' },
  success: function(data) {
    console.log(data)
  }
})

相关问题

若依vue.config.js中的process.env.VUE_APP_BASE_API.target路径如何在前端用$.ajax

在前端中使用 `$.ajax` 发送请求时，可以使用 `process.env.VUE_APP_BASE_API` 来获取 `vue.config.js` 中配置的 `VUE_APP_BASE_API` 环境变量的值。

例如，如果 `VUE_APP_BASE_API` 配置为 `/api`，则可以在前端代码中使用以下方式发送请求：

$.ajax({
  url: process.env.VUE_APP_BASE_API + '/data',
  method: 'get',
  success: function (data) {
    console.log(data);
  }
});

这样就能够将 `/api/data` 作为请求的 URL 发送到后端。当然，在使用 `process.env.VUE_APP_BASE_API` 之前，需要先引入该变量，可以通过以下方式实现：

import { BASE_API } from '@/config';

$.ajax({
  url: BASE_API + '/data',
  method: 'get',
  success: function (data) {
    console.log(data);
  }
});

其中，`@/config` 是一个前端项目中的配置文件，用于存放一些全局的配置信息。在该文件中，可以将 `process.env.VUE_APP_BASE_API` 赋值给一个常量，例如：

export const BASE_API = process.env.VUE_APP_BASE_API;

这样，在其他前端代码中就可以直接使用 `BASE_API` 来代替 `process.env.VUE_APP_BASE_API` 了。

在vue使用$.ajax()

根据提供的引用内容，可以得知在Vue中使用$.ajax()需要先引入jQuery库，然后在Vue组件中使用$.ajax()方法。具体步骤如下：

1.使用npm安装jQuery库：

npm i jquery --save

2.在Vue组件中引入jQuery库：

import $ from 'jquery'

3.在Vue组件中使用$.ajax()方法：

$.ajax({
  url: 'your-api-url',
  type: 'GET',
  dataType: 'json',
  success: function (data) {
    // 处理返回的数据
  },
  error: function (xhr, status, error) {
    // 处理错误
  }
})

需要注意的是，由于Vue推荐使用axios或者fetch等库来进行网络请求，因此在Vue中使用$.ajax()并不是最佳实践。如果需要在Vue中进行网络请求，建议使用Vue官方推荐的axios库。