在开发阶段的后端基址一般是:http://127.0.0.1:8000

到了上线阶段肯定要改成公网地址,这时,我们前端在向后端发送请求的时候,如果都是直接使用http://127.0.0.1:8000,这样在上线前就要改很多的地址。

所以在vue开发阶段前,我们要设置好配置,用变量来承载基址http://127.0.0.1:8000,到时候要改地址,只需要改一个地址就可以了。

1、在src--assets下创建js文件夹,在js下创建settings.js:

   export default {
    base_url:'http://127.0.0.1:8000'
    //上线时,修改这个地址就可以了
}

2、到main.js中暴露给所有组件

import settings from "./assets/js/settings";
Vue.prototype.$settings = settings

3、使用:在向后端发送请求的时候使用:vm.$settings.base_url

    methods: {
      submitForm() {
    this.$axios({
        method:'post',
        //使用字符串拼接出完整的后端地址
        url:this.$settings.base_url+'/user/login/',
        data:{'username':this.ruleForm.age,'password':this.ruleForm.pass}
    }).then(res=>{
        this.$cookies.set("oatoken",res.data.data.token,'7d')
        this.$router.push('/home')

        alert(this.$settings.base_url)
    }).catch(error=>{
        console.log(error)
        })
      },
}

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐