美文网首页工作生活
vue生产环境开发环境配置不同的接口地址

vue生产环境开发环境配置不同的接口地址

作者: 丰起云啸 | 来源:发表于2019-08-13 15:46 被阅读0次

第一种

  1. /config/dev.env.js
    

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"172.1.1.1/api"' //新增接口路径
})
/config/prod.env.js

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"//127.0.0.1/api"' //新增接口路径
})
2.然后我们可以在main.js文件设置vue原型

Vue.prototype.baseURL = process.env.API_ROOT;

第二种
一般项目webpack会有两个或多个配置文件,如:
webpack.prod.conf.js对应线上打包
webpack.dev.conf.js对应开发环境
使用webpack.DefinePlugin就可以

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

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

BASE_URL一定要默认一个"" 要不然不是字符串
这样在vue里 BASE_URL就是全局变量了.直接用BASE_URL就能获取到

相关文章

网友评论

    本文标题:vue生产环境开发环境配置不同的接口地址

    本文链接:https://www.haomeiwen.com/subject/poiqhctx.html