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

执行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的地方。

请注意，您将受限于Cross-Origin-Resource-Sharing制定的规则。如果您的服务器不允许为您的Vue.js页面提供URL，则需要将其打开。

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

Answer 2

您在代码中使用axios，因此可以尝试：

// service.js
import axios from 'axios';
axios.default.baseURL = 'https://server/myapp/main.php/';
export defalut 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

如果您的vue-cli版本高于3.x，则添加您的

.env 文件中的
开发变量
.env.production 文件中的
production 变量

只有以 VUE_APP _ 开头的变量将通过webpack.DefinePlugin静态嵌入到客户端捆绑包中。您可以在应用程序代码中访问它们：console.log（process.env.VUE_APP_SECRET）Vue Doc

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

3 个答案: