如何在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);
            });
    },
},

Answer 1

你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请求库在发出请求时（例如与axios一起使用）应该使用这些环境变量：

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

method会在哪儿GET/POST/PUT/DELETE。

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

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