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

- ierdna

---

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

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

@Sphinx 这是我现在所做的，但我想知道是否有一种方法可以将服务器排除在外。 - ierdna

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之一。

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

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

- Ohgodwhy

---

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

@andrei 这些文件是在你的项目根目录下自己创建的。请仔细阅读环境变量文档，这里有大量有用的信息，特别是关于“模式”概念的部分。 - Ohgodwhy

@andrei 他们绝对会这样做的。.env 文件根据您的环境加载。例如将 .env 改为 .env.development，添加变量并记录下来以观察它们的变化。当您运行 yarn serve 和 yarn build 时，vue-cli-service 在幕后被调用，它们本地调用 vue-cli-service serve，后者调用 serve 库。实际上，您还可以传递一个目录作为服务器，使您的 serve 运行生产文件，例如使用 yarn serve --dist 从 dist 目录中提供服务。 - Ohgodwhy

经过一些调试，我使用了您的建议使其正常工作。添加了一个带有指定基础URL的axios插件配置。 - ierdna

需要注意的是：必须使用 VUE_APP_ 前缀（参见 https://cli.vuejs.org/guide/mode-and-env.html#environment-variables）。我曾经定义了一个名为 VUE_DEV_API_ENDPOINT 的变量，但它并没有起作用——process.env.VUE_DEV_API_ENDPOINT 是未定义的。 - YakovL

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

- billychan

Answer 3

如果您的vue-cli版本高于3.x，则需要在.env文件中添加您的开发变量，以及在.env.production文件中添加生产变量。只有以VUE_APP_开头的变量才会被静态地嵌入到客户端包中，并使用webpack.DefinePlugin进行处理。您可以在应用程序代码中访问它们：console.log(process.env.VUE_APP_SECRET) Vue Doc。

- Arun Raj