vue 根据不同环境，调用不同的数据请求地址 vue-cli

vue 根据不同环境，调用不同的数据请求地址 vue-cli

vue 根据不同环境，调用不同的数据请求地址 vue-cli

​

前言

在使用 vue 开发的时候，会遇到这样一个问题，开发时用的请求地址，跟要打包布署到线上的地址是不一样的。 如果手动每次改会很麻烦，并且也容易遗忘，那么如何处理这种情况呢？此时就可以用 vue 的环境变量。

修改运行指令

我们已经知道 vue 在 ​​serve​​​ 或者 ​​build​​​ 的时候是调用的 npm 的指令，在 ​​package.json​​​ 文件中指定。 如，​​​vue-cli​​ 默认的就有三个运行指令：

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }

但其实你可以给这些指令添加选用哪个环境参数

"serve": "vue-cli-service serve --mode develop"

​​--mode​​ 这个参数的作用

这个参数会进行什么操作呢？

"serve": "vue-cli-service serve --mode develop"

上面这个参数会使用主目录中的环境配置文件 ​​.env.develop​​​ 中含有的变量 你可以定义多个这种环境变量文件，比如我定义了两个文件

.├── .env.develop # 开发环境├── .env.production # 生产环境

文件中的变量必须是 ​​VUE_APP​​​ 开头的，才可用在 ​​src​​​ 文件夹下的 ​​.js​​​ 中使用。 文件内容是这样的：

​​.env.develop​​

VUE_APP_REQUEST_URL = '= '​​.env.xxxx​​ 中的变量值

我们定义了相应的环境变量，那么如何使用它呢

在 ​​src​​​ 目录的 ​​.js​​ 文件中是这样使用的

const BASE_URL = process.env.VUE_APP_REQUEST_URL;

这样就可以根据不同环境使用不同请求地址了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。