vue-cli3.0配置不同的网址(根据不同的环境进行网址切换)

在生产环境和开发环境的时候,有些变量是不一样的,比如接口,打包的时候就需要切换,

所以配置下环境变量,通过不同命令行切换不同环境api等信息
(1)先在package.json文件中添加:

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prd",
  },

在运行后面加上 --mode 新增的文件后缀

(2-1)在项目目录下建立 .env.dev文件和.env.prd文件

.env.dev文件
NODE_ENV = development
VUE_APP_BASIC_API = dev
env.prd文件
NODE_ENV = production
VUE_APP_BASIC_API = prd

然后在src目录下新建文件夹utils ----》建文件config.js

config.js文件

let BackUrl = null;
let BasiUrl  = process.env.VUE_APP_BASIC_API

if(BasiUrl === 'dev') {
    BackUrl = '开发环境的网址'
}else if(BasiUrl === 'prd') {
    BackUrl = '生产环境的网址'
}
export default BackUrl

(2-2)在项目目录下建立 .env.dev文件和.env.prd文件

.env.dev文件

NODE_ENV='dev'
VUE_APP_URL='http://192.168.1.86:8080/'

env.prd文件

NODE_ENV=prd
VUE_APP_URL=线上域名

在main.js文件中
console.log(process.env) //打印看一下数据

另外在vue-config.js文件中

module.exports = {
    lintOnSave: false,
    outputDir: `dist-${process.env.NODE_ENV}` 
}

然后在axios封装中引入即可

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值