vue如何配置生产环境和开发环境的接口?

3131975015
  • 411

在开发环境这么配置的接口 每次打包时都要手动改成线上接口 所以我想配置一下 不用每次打包这么麻烦

axios.get('../admin/mobile/reg/sms' + this.phone).then(res=>{ //线上
//axios.get(this.HOME+'/admin/mobile/reg/sms/' + this.phone).then(res=>{  //本地
      this.code1 = res.data.data
})

Vue.prototype.HOME = '/api'

proxyTable: {
        '/api':{
            target: "https://api.xxmb.com",
            changeOrigin:true,
            pathRewrite:{
                '^/api':''
            }
        }
},

后来我在网上收到一个方法就是下面这样的 可是我想问一下 我这个开发环境时直接写成这样吗BASE_URL:"'https://api.xxmb.com'"
那么线上的那个怎么配置呢?线上的那个..是做的nginx转发不知道BASE_URL中怎么写

开发环境(webpack.dev.conf.js):

//开发环境下的baseURL
new webpack.DefinePlugin({
  BASE_URL:"'xxxxxxxxx'"
})
线上环境(webpack.prod.conf.js):

 //线上环境下的baseURL
new webpack.DefinePlugin({
  BASE_URL:"'xxxxxxxxx'"
})

使用时
axios.defaults.baseURL = BASE_URL;

回复
阅读 3.3k
4 个回答

如果是通过 vue cli 3.0 构建的项目,可以在项目根目录中的下列文件来指定环境变量的方式,指定某个变量,比如 NODE_ENV=dev,可以添加两个文件夹 .env.dev.env.prod,对字段 NODE_ENV 赋相应的值(development 或者 production ),然后通过 process.env.NODE_ENV 的值来决定请求地址

看你的配置,应该是可以这样做, baseURL无论生产环境还是开发环境都是/api

axios.defaults.baseURL = '/api'

例如服务端有一个api是: https://api.xxmb.com/article/list

代码中发起一个请求的写法是: axios.get('/article/list')

开发环境

本地开发环境的端口例如是8080,则该请求在本地F12中的完整的url是:localhost:8080/api/article/list,由于配置了代理转发:

proxyTable: {
        '/api':{
            target: "https://api.xxmb.com",
            changeOrigin:true,
            pathRewrite:{
                '^/api':''
            }
        }
},

/api开头的都转发了,所以该请求实际上就是: https://api.xxmb.com/article/list

生产环境

在生产环境中,例如域名是http://xxmb.comaxios.get('/article/list')在F12中看的请求完整地址是http://xxmb.com/api/article/list,nginx需要对它做转发(类似proxyTable的作用),配置大概是:

location /api {
       proxy_pass https://api.xxmb.com;

   }

即带/api开头的请求都转发到https://api.xxmb.com这后端去了

不建议使用相对路径, 合理利用变量, 使用变量来同意接口, 结合打包时候的环境变量来决定使用哪个

nginx 只是转发,跟 BASE_URL 没关系。你的运行环境有 nginx ,开发环境有 devserver,都是一样的啊。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏