使用env文件切换开发环境

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用env文件切换开发环境相关的知识,希望对你有一定的参考价值。

参考技术A 开发过程中经常遇到不小心切换错了接口地址从而打错生产包, 为了避免再次发生这种不必要的错误,总结了一下关于env文件在实际开发中的使用。

首先我们在根目录新建三个 .env的文件

.env 无论开发环境还是生成环境都会加载

.env.development 开发环境加载这个文件

.env.production 生成环境加载这个文件

env 文件需要声明运行的环境

定义变量需要以 VUE_APP_ 作为前缀

最后需要在package.json文件里面增加打包和运行命令,

以上就是env文件的使用方法。

axios 生产环境和开发环境 ip 切换(修改文件配置)

前言

往往在开发过程中,前端axios 连接的ip 地址 是内部服务器,甚至不止一个,可能有多个,那么在封装axios 工具的时候我们通常用这种方式

const axiosbaseurl = process.env.NODE_ENV===‘development‘ ? ‘http://192.168.2.125:8890‘:‘http://192.168.2.126:8890‘
const  requsturlone  = process.env.NODE_ENV===‘development‘ ? ‘http://192.168.2.125:8891‘:‘http://192.168.2.126:8892‘
总之前端一个工程中要连接多少个app 就写多少行配置,那么开发环境切换到生产环境 后 ,我们需要把内部ip 换成 生产环境ip,所做的就是在源码里将上述的地址改成需要的ip 编译部署,个人觉得这样不太适合。日后的自动化运维部署,并且动源码总是感觉不太好,于是想将相关的配置文件写到config.js 中,通过手动修改config.js 中内容直接可以更改url ,这样不用我每次动源码再去编译了

 

正题 :

于是乎我在模块里引入外部config.js 

import {ip,port} from "../public/static/config.js"

这么看很合理,开发环境中那个,我修改config.js 中的ip  axios 请求url 也相应改变,但是当我 build 后,再在config.js 里修改相关ip port 时 axios 始终以修改前的ip 和port 为地址,根本不变化,这里深层次的原因没有弄明白,大致总结了下,应该时webpack 在编译的时候就已经将config.js 内容编译到代码中了,当我们在浏览器中加载前端js ,   js 并没有动态的从相关文件中寻找。这里我去看了下 import 和 require 的引用机制,换成 require 引入,require是运行时加载,但还是不行,问题应该是出在了webpack 这里。

换种思路方法;


 

通过在 index.html 中 script 引入静态文件,将文件内容挂载到window 对象上,那么在我的axios 模块中就可以通过window 动态的加载config.js 中的内容了。

    <script type="text/JavaScript" src="/static/ipconfig.js"></script>
 
axios 引入 
const ipconfig = window.$ipconfig
解决问题。。。

以上是关于使用env文件切换开发环境的主要内容,如果未能解决你的问题,请参考以下文章

axios 生产环境和开发环境 ip 切换(修改文件配置)

axios 生产环境和开发环境 ip 切换(修改文件配置)

httprunner学习13-环境变量.env

PM2用法简介命令行启动 --env 参数设置使用问题

yii2 环境切换(开发,正式)

UniApp 项目中配置环境变量