如何在 vue.config.js 中设置用于生产的 API 路径？

Question

我正在使用 vue cli3 进行设置。我已经在 vue.config.js 文件中设置了 devServer api：

 devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:1888/apps/test/mainapp.php/',
            changeOrigin: true,
        },
    },
}

我还需要将路径“ https://server/myapp/main.php/ ”设置为生产 API 路径，但我似乎无法在 文档 中找到有关如何执行此操作的任何信息。任何帮助表示赞赏。

我在代码中所做的简要示例：

 methods: {
    login() {
        this.axios.post('/api/test')
            .then((resp) => {
                console.log(resp);
            })
            .catch(() => {
                console.log('err:' , err);
            });
    },
},

原文由 ierdna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您执行 yarn/npm run build 时，您的 devServer 不会运行。您只会获得要提供的已转换的 javascript。您需要更改 .env 文件中的 URL。

发展：

 .env

VUE_APP_API_ENDPOINT = '/api'

生产：

 .env.production

VUE_APP_API_ENDPOINT ='https://server/myapp/main.php'

那么你的 XHR 请求库应该在发出请求时使用这些环境变量，例如使用 axios：

 axios[method](process.env.VUE_APP_API_ENDPOINT, data)

其中 method 将是 GET/POST/PUT/DELETE 。

请注意，您将被限制在 Cross-Origin-Resource-Sharing 制定的规则中。如果您的服务器不允许为您的 Vue.js 页面提供服务的 URL，您需要打开它。

您不需要对您的 devServer 配置进行任何更改，因为您的 .env 现在将声明发送到 /api 的 xhr 请求仍然是您的代理。

原文由 Ohgodwhy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您正在使用 axios 在您的代码中，因此您可以尝试：

 // service.js
import axios from 'axios';
axios.defaults.baseURL = 'https://server/myapp/main.php/';
export default axios;

// main.js
Vue.prototype.$axios = axios;

// In your component
login() {
    this.$axios.post('/api/test', data)
        .then((resp) => {
            console.log(resp);
        })
        .catch(() => {
            console.log('err:' , err);
        });
}

然后，每个请求都将使用您设置的默认值 baseUrl 发送。

查看 axios 的更多选项

原文由 billychan 发布，翻译遵循 CC BY-SA 4.0 许可协议