webpack - 如何在 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 路径，但我似乎无法在 documentation 中找到任何信息关于如何去做。感谢您的帮助。

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

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

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 请求它仍然会为你代理。