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

我使用 vue cli3 进行设置。我已经在中设置了 devServer apivue.config.js file:

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

我还需要设置路径'https://server/myapp/main.php/ https://server/myapp/main.php/' 作为生产 API 路径，但我似乎无法在文档 https://cli.vuejs.org/config/关于如何去做。任何帮助表示赞赏。

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

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

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

发展：

.env

VUE_APP_API_ENDPOINT = '/api'

生产：

.env.production

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

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

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

Where method将会GET/POST/PUT/DELETE.

请注意，您将受到跨源资源共享制定的规则的限制。如果您的服务器不允许该 URL 为您的 Vue.js 页面提供服务，您需要将其打开。

您无需对您的devServer配置因为你的.env现在将声明发送到的 xhr 请求/api它仍然会为你代理。