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

Posted 2023-02-22

【中文标题】如何在 vue.config.js 中为生产设置 API 路径？

【英文标题】：How to set API path in vue.config.js for production?

【发布时间】：2018-12-26 15:42:15

【问题描述】：

我正在使用 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);
            );
    ,
,

【问题讨论】：

新设置 (cli3) 中没有 config 目录

如果是这样，一种解决方案将在您的production 前端 服务器（apache/iis 等）上设置重定向规则，然后对https://frontend-server\api 的所有请求将被重定向到https://backend-server/myapp/main.php/，然后记得添加CORS规则。

@Sphinx 这就是我现在所做的，但我想知道是否有办法将服务器排除在等式之外

【参考方案1】：

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

.env 文件中的

开发变量

.env.production 文件中的

生产变量

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

【参考方案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的更多选项

【参考方案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 请求，它仍将为您代理。

【讨论】：

在哪里可以找到.env 文件？

@andrei 您自己在项目的根目录中创建这些。请拥有a read over the documentation on environment variables，因为这里有大量有用的信息，尤其是关于modes 的想法。

据我了解，这些文件仅在与 vue-cli-service 一起使用时才会加载，但我只使用 yarn serve 和 yarn build 命令，它们似乎不是查看 .env 文件

经过一番修改后，我根据您的建议让它工作了。为 axios 添加了一个插件，配置指定 baseURL

需要注意：VUE_APP_ 前缀是 required（当我有一个名为 VUE_DEV_API_ENDPOINT 的变量时它不起作用 - process.env.VUE_DEV_API_ENDPOINT 未定义）