Vue2配置环境变量
代码开发中我们把代码分成开发模式和生产模式,这两种模式的转换我们称职为环境变量。接下来带着大家如何去配置和使用这个环境变量Vue2官网:Vue.js一、首先我们在项目全局目录下创建两个 .env 文件夹,文件分别为 .env.production 生产模式和 .env.development 开发模式二、在文件里面我们写入对应的https请求地址NODE_ENV=developmentVUE_AP
·
代码开发中我们把代码分成开发模式和生产模式,这两种模式的转换我们称职为环境变量。
接下来带着大家如何去配置和使用这个环境变量
Vue2官网:Vue.js
一、首先我们在项目全局目录下创建两个 .env 文件夹,文件分别为 .env.production 生产模式和 .env.development 开发模式
二、在文件里面我们写入对应的https请求地址
NODE_ENV=development
VUE_APP_BASE_URL="http://localhost:8001"
第一行的 NODE_ENV 是告诉系统这是什么环境的文文件夹
这里面其中的 VUE_APP_ 这个是项目固定写死的,不可更改,其后面的名称可以自己随便取,在这里我取的名字为 BASE_URL
三、来到 package.json 文件夹找到scripts 利用 --mode 来分配我们项目跑起来的指令分别对应的是生产模式开发模式
"scripts": {
"dev": "vue-cli-service serve --mode development",
"pro": "vue-cli-service serve --mode production",
"build": "vue-cli-service build"
},
这边我的定义是跑 dev 为开发模式,跑 pro 为生产模式
四、创建vue.config.js 文件夹,也是创建在项目全局目录,利用 proxy 方法来实现
// vue.config.js
module.exports={
devServer:{
proxy:process.env.VUE_APP_BASE_URL
}
}
这个时候,你只需要将赋值在proxy 的 process.env.VUE_APP_BASE_URL 拿出来放在的发送请请求的路径上即可,然后重点是记得关闭项目重新跑一遍,不然环境变量是不会生效的
console.log( process.env.VUE_APP_BASE_URL )
更多推荐
已为社区贡献3条内容
所有评论(0)