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

推荐答案

执行yarn/npm run build时,devServer不会运行.我们只向您提供要提供的传输javascript.你需要在你的网站中更改你的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请求,而/api仍将代理您.

Vue.js相关问答推荐

Visual Studio代码中的VUE/VLAR扩展不断崩溃:JS/TS语言服务立即崩溃5次…

Vue3组合-如何在组件卸载时注销回调

如何在与父集合相同的读取中取回子集合(或重构数据?)

如何使用composition api v-model Select 框获取其他JSON 值?

在 Vuejs 中更新 Chartjs 图表数据集

仅在构建时为 Vue3 和 TailwindCSS 添加前缀

Vuetify 扩展面板,面板标题左侧带有图标

两个div元素之间的vue2过渡

Webpack 导入的模块不是函数

在 Vuex Store 模块中使用 Vue.js 插件

VueJS:如何在组件数据属性中引用 this.$store

如何在 vue 组件之外访问$apollo?

Eslint Vue 3 解析错误:'>' expected.eslint

如何在 vue 3 脚本设置中使用

在 vuejs 中将旧代码修改为 vue router 4

为 Vue 组件动态添加属性

如何突出显示 Vuetify 菜单中的选定项目?

基本 vue.js 2 和 vue-resource http 获取变量赋值

mount() 仅在组件 Vue.js 上运行一次

Vue - 重用方法的最佳方式