vue2项目配置环境变量
一、环境变量干啥用的我们学习它肯定就是要用它,说个最常用的例子吧,我们请求的地址在开发线、测试线、和正式线中,肯定是不一样的所以每次打包之前去改就显得很麻烦,它就是用来干这个的帮我们解决这个问题。废话少说,立马开干二、配置环境变量首先我们需要在项目根目录下创建你所需要的环境变量名字为.env.xxxx,前面.env是固定的后面可以自定义,这里我定义了三个.env.development 开发.en
·
一、环境变量干啥用的
我们学习它肯定就是要用它,说个最常用的例子吧,我们请求的地址在开发线、测试线、和正式线中,肯定是不一样的所以每次打包之前去改就显得很麻烦,它就是用来干这个的帮我们解决这个问题。废话少说,立马开干
二、配置环境变量
首先我们需要在项目根目录下创建你所需要的环境变量名字为.env.xxxx,前面.env是固定的后面可以自定义,这里我定义了三个
- .env.development 开发
- .env.test 测试
- .env.production 生产
三、定义变量
只有VUE_APP开头的变量和NODE_ENV和BASE_URL才有效哦,所以我定义了如下变量;
.env.development文件
NODE_ENV=development
VUE_APP_BASE_URL="http://dev"
.env.test文件
NODE_ENV=test
VUE_APP_BASE_URL="https://test"
.env.production文件
NODE_ENV=production
VUE_APP_BASE_URL="https://prod"
四、使用
我们定义好了变量在哪里使用呢,在js文件中,这样来使用,这里我们已axios配置举个例子
import axios from "axios";
const request = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, //这就是我们定义好的变量啦
timeout: 5000
})
export default request;
然后在我们的package.json里面添加如下代码
"scripts": {
"dev": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode test",
"pro": "vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test"
},
然后我们只需要运行npm run build:test就可以轻松打包test模式的变量啦,build的话默认会使用production环境变量。
更多推荐
所有评论(0)