如何在 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

如果你的 vue-cli 版本高于 3.x，那么添加你的

.env 文件中的

开发变量

.env.production 文件中的

生产变量

只有以 VUE_APP_ 开头的变量才会使用 webpack.DefinePlugin 静态嵌入到客户端包中。您可以在应用程序代码中访问它们：console.log(process.env.VUE_APP_SECRET) Vue Doc

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的更多选项

Answer 3

当您执行 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。

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

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