栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vue-cli3.0设置环境变量

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue-cli3.0设置环境变量

我们做项目都会有测试服和正式服,而且接口地址是不同的我们希望本地开发的时候是测试服,打包上线的时候是正式服,笨方法是每次打包的时候都去将测试服的地址改成正式服,这样也是可以的但是很麻烦有时候还会忘记(都已经上传了才发现地址没改)。
研究了一下vue-cli3.0的环境变量配置可以分成生产环境(线上),开发环境(测试)
开发环境npm run serve
测试环境npm run build

现在我们就来试验一下吧


 根目录新建这三个文件env.development是开发环境env.production是生产环境

VUE_APP_URL='http://123.com'

文件定义的方式如上开头必须以VUE_APP_[定义的名字]

然后我们可以通过process.env.VUE_APP_URL来拿到定义好的环境变量

使用环境变量

let baseUrl = null

if (process.env.VUE_APP_URL == 'window.location.origin') {
  baseUrl = window.location.origin + '/'
} else {
  if (process.env.VUE_APP_URL == 'http://123.com/') {
    baseUrl = 'http://123.com/'
  }
}

这里因为公司需求说线上项目有可能要分站,接口域名要动态的。
在封装axios的js文件中赋值baseUrl的时候先通过环境变量来判断使用哪一个域名。


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240207.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号