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

第一种

  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就能获取到

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容