vue项目根据不同环境动态配置接口请求ip及全局变量（vue环境变量配置）

大龄程序媛的搬砖日常 2024-04-08 原文

在项目的开发过程中，我们常常会遇到根据不同的环境需要切换不同的ip的问题，例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等，这样在每次部署不同环境的项目前都需要先手动切换ip，这样既繁琐又易出错。本篇文章就记录了本人在解决这一问题的详细步骤。

配置步骤

1.在项目的根目录下新建 .env.xxx 文件

vue脚手架创建的项目默认目录结构如下：

根据环境个数在根目录下新增 .env.xxx 文件

如上，三个 .env.xxx 文件后缀名（文件后缀名可自定义）为development、production、test，可分别对应为开发环境、生产环境和测试环境。如果还需要预发环境，则还可继续新增一个 .env.pre 文件代表预发环境。

每个环境都会加载的变量

如果还需要设置每个环境都需要加载的变量，则可以添加 .env 文件，如果没有，则可以不建此文件。（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）

2.在对应环境的 .env.xxx 文件中添加变量

在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

NODE_ENV : 主要用于标识当前的环境
BASE_URL: vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
VUE_APP_* : 自定义变量

.env.development（开发环境）文件代码

.env.production（生产环境）文件代码

.env.test（测试环境）文件代码

.env（所有环境都会加载的变量）文件代码

3.package.json 文件配置对应环境打包命令

vue脚手架创建的项目默认配置如下：

vue-cli-service serve：配置默认是使用的development对应环境的环境变量（当然也可以自己手动指定对应的环境，在现有命令后面加上 --mode development即可,完整命令：vue-cli-service serve --mode development），也就是说执行npm run serve，会将.env.development文件和.env文件里面的变量加入项目代码中
vue-cli-service build：配置默认是使用的production对应环境的环境变量，也就是说执行npm run build，会将.env.production文件和.env文件里面的变量加入项目代码中

添加测试服打包命令(运行命令：npm run build:test)

在package.json文件中的 scripts 对象中添加如下代码：

vue-cli-service build --mode test :命令中的test对应的是 .env.xxx文件中设置NODE_ENV变量的值，如果没有设置NODE_ENV变量，则默认以 .env.xxx 文件的后缀名为准，如果也找不到.env.test文件，则打包报错，

如果想在本地直接使用测试服的环境变量也可以在package.json 中再配置项目启动命令，配置如下（运行命令:npm run serve:test）：

或者直接修改现有serve 的运行模式：

配置完成后如何在项目中使用

在请求js文件中，可用于替换请求接口的ip，达到根据不同的环境请求不同的ip的效果
在vue文件中，可当作全局变量使用，类似于在vue中定义的全局常量
在vue.config.js文件中使用，可用于判断当前的打包环境，根据不同的环境进行一些打包优化配置
vue-cli的index.html中使用，可用于加载公司统一定义的一些js、css等头部文件（需根据各个环境引入各自的js和css）

1.请求接口的js文件/vue页面中使用

    语法：process.env.变量名称

2.vue.config.js中根据环境变量判断打包环境，进行打包优化配置：

3.在vue-cli的index.html中使用

语法：<%= 变量名 %> html中根据不同环境，加载不同css/js文件

//css文件
<link rel="stylesheet" href="<%= VUE_APP_API %>/header/head.css" rel="external nofollow" >
//js文件
<script type="text/javascript" src="<%= VUE_APP_API %>/footer.js"></script>

html中根据不同环境，加载不同本地js代码

<% if (process.env.NODE_ENV === 'production' ) { %>
    <script>
      window.test = 'xxxx'
    </script>
<% } %>

vue 变量 xff img xff0c vue.js 前端 javascript

有关vue项目根据不同环境动态配置接口请求ip及全局变量（vue环境变量配置）的更多相关文章

ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
ruby - 通过 ruby 进程共享变量 - 2
我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是
ruby-on-rails - 独立 ruby 脚本的配置文件 - 2
我有一个在Linux服务器上运行的ruby脚本。它不使用rails或任何东西。它基本上是一个命令行ruby脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。最佳答案首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - 从 Ruby 中的主机名获取 IP 地址 - 2
我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge