vue-cli作用,vue cli配置详解

　　模式是Vue CLI项目中的一个重要概念。下面这篇文章主要介绍了Vue CLI中关于模式和环境变量的相关信息，有需要的朋友可以参考一下。

前言

　　在实际的项目开发中，我们通常会经历开发阶段、测试阶段和最终上线阶段。每个阶段可能对项目代码有不同的要求，那么如何轻松的让我们的项目呈现不同的效果，在不同的阶段使用不同的功能呢？

　　这里我们需要引入环境的概念。公文中模式和环境变量的描述

　　通常，一个项目会有以下三种环境：

　　开发环境(开发阶段，本地开发版本，通常使用一些调试工具或者额外的辅助功能)；

　　测试环境(测试阶段，预上线版本，除了一些bug修复，基本上不会和上线版本有太大区别)；

　　生产环境(上线阶段，正式发布的版本，通常优化并关闭错误报告)；

　　作为开发人员，我们可能需要为每个环境编写一些不同的代码，并确保这些代码在正确的环境中运行。那么应该如何判断项目的环境，同时执行不同的代码呢？这要求我们正确配置和管理环境。

1. 配置文件

　　正确的配置环境首先要求我们知道不同环境配置之间的关系，如图：

　　从上图我们可以知道，每个环境其实都有自己不同的配置，同时它们也有交集，也就是它们都共有的配置项。那么在Vue中应该如何应对呢？

　　我们可以在根目录中创建以下文件来配置不同环境中的变量：env #在所有环境中加载。env.local #在所有环境中都被加载，但是会被git忽略。环境。[mode] #仅在指定模式下加载，例如：环境发展。环境生产。环境。[模式]。local #只在指定模式下加载，但会被git忽略。

　　例如，创建一个名为。env.development，这表明它只在开发环境中加载。

　　在这个文件中，我们可以配置以下变量的键值对：

　　#开发环境配置

　　节点环境=开发

　　VUE _ APP _ API _ BASE _ URL=https://www . Baidu . com/

　　此时如何访问vue.config.js中的这些变量？使用process.env.[name]进行访问。

　　//vue.config.js

　　console . log(process . ENV . node _ ENV)；//开发(终端输出)

　　当运行npm run serve命令时，会发现输出是development，因为vue-cli-service serve命令的默认设置环境是development。

　　如果我们需要修改，package.json中serve脚本的命令可以是：

　　//package.json

　　脚本:{

　　“服务”:“vue-CLI-服务服务模式阶段”，

　　},

　　-mode stage实际上是webpack 4中模式配置项对stage的修改，它会读取相应下的配置。环境。[模型]文件。

　　如果没有找到相应的配置文件，它将使用默认的环境开发，同样，vue-cli-service build将使用默认的环境生产。

　　如果你再创造一个。env文件，再次配置重复的变量，但使用不同的值。

　　#环境配置

　　节点环境=环境

　　VUE应用编程接口基础网址=http://www.soso.com/

　　因为。env文件会被所有环境加载，也就是公共配置，最后运行vue-cli-service serve会打印出哪一个？

　　答案是发展。

　　但是如果按照上面的。ENV.development.local文件，答案是ENV。

　　所以。环境。[模式]。本地将覆盖下的相同配置。环境。[模式]。

　　类似地，env.local将覆盖. env下的相同配置。

　　可以得出相同配置项的权重为：环境。[模式]。local.env. [mode]。环境.本地.环境

　　注意：除了权重大、覆盖面小的相同配置项，不同的配置项会合并，类似于Javascript中Object.assign的用法。

2. 环境注入

　　通过上面配置文件的创建，我们成功的以命令行的形式设置了项目环境，并且可以自由切换，但是注意：Vue前端代码中打印的process.env可能与vue.config.js中的输出不同，这就需要普及一个知识点：webpack通过DefinePlugin的内置插件将process.env注入到客户端代码中。

　　//webpack配置

　　{

　　.

　　插件：[

　　新网络包。定义插件({

　　process.env :

　　NODE _ ENV:JSON . stringify(process . ENV . NODE _ ENV)

　　}

　　}),

　　],

　　.

　　}

　　由于vue-cli 3.x封装的webpack配置已经为我们完成了这个功能，我们可以直接在客户端代码中打印出process.env的值。这个对象可以包含多个键值对，也就是说可以注入多个值。但是被vue-cli封装后，只能注入环境配置文件中以VUE_APP_开头的变量，NODE_ENV和BASE_URL两个特殊变量除外。

　　例如，在权重最高的env.development.local文件中写入：

　　#开发环境配置

　　NODE_ENV=developmentLocal

　　VUE _ APP _ API _ BASE _ URL=https://www . Baidu . com/

　　NAME=javaScript

　　然后我们尝试在vue.config.js中打印process.env，终端输出：

　　{

　　.

　　npm_config_ignore_scripts: ，

　　npm_config_version_git_sign: ，

　　npm_config_ignore_optional: ，

　　npm_config_init_version: 1.0.0 ，

　　npm _包_依赖项_ vue _路由器：^3.0.1，

　　NPM _ config _ version _ tag _ prefix:“v”，

　　NPM _ node _ exec path:“/usr/local/bin/node”，

　　NODE _ ENV:“development local”，

　　VUE _ APP _ API _ BASE _ URL: https://www . Baidu . com/，

　　名称： javaScript ，

　　BABEL_ENV:开发，

　　.

　　}

　　您可以看到，输出内容除了环境配置中的变量之外，还包含许多npm信息，但是您会在导入文件main.js中打印时发现输出：

　　{

　　BASE _ URL:“/”，

　　NODE _ ENV:“development local”，

　　VUE _ APP _ API _ BASE _ URL: https://www . Baidu . com/，

　　}

　　可以看到，在注入过程中，除了VUE_APP_之外的变量都被过滤调整，多出来的BASE_URL就是你在vue.config.js中设置的值，默认值是/，在环境配置文件中是无效的。

3. 额外配置

　　以上，我们通过创建新的配置文件，为项目的不同环境配置不同的变量值，可以实现项目的基本环境管理。但是，配置文件中的参数，如。env目前只支持静态值，不能使用动态参数，某些情况下无法实现特定需求。

　　此时，您可以在根目录下创建一个新的config文件夹来存储一些附加的配置文件。

　　/*配置文件index.js */

　　//公共变量

　　const com={

　　IP: JSON.stringify(xxx )

　　};

　　模块.导出={

　　//开发环境变量

　　开发人员：{

　　环境：{

　　类型：JSON.stringify(dev )，

　　.com

　　}

　　},

　　//生产环境变量

　　构建：{

　　环境：{

　　类型：JSON.stringify(prod )，

　　.com

　　}

　　}

　　}

　　上面的代码将环境变量分为公共变量、开发环境变量和生产环境变量。当然，这些变量可能是动态的，比如用户的ip。

　　现在我们要将这些变量注入vue.config.js中。您可以使用chainWebpack修改DefinePlugin中的值：

　　/* vue.config.js */

　　const configs=require(。/config )；

　　//用来做相应的合并处理

　　const merge=require( web pack-merge )；

　　//根据环境确定使用哪种配置。

　　const CFG=process . ENV . node _ ENV=== production ？configs . build . env:configs . dev . env；

　　模块.导出={

　　chainWebpack: config={

　　config.plugin(define )。tap(args={

　　let name= process.env

　　//使用merge确保原始值不变

　　args[0][name]=merge(args[0][name]，CFG)；

　　返回参数

　　})

　　},

　　}

　　最后，带有动态配置的对象可以成功地打印在客户机上：

　　{

　　BASE _ URL:“/”，

　　IP: xxx ，

　　NODE _ ENV:“development local”，

　　类型：“开发”，

　　VUE _ APP _ API _ BASE _ URL: https://www . Baidu . com/，

　　}

4. 实际场景

　　使用process.env.xxx访问属性。

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　BASEURL:process.env，

　　}

　　},

　　已安装(){

　　console.log(这个。https://www.baidu.com/

　　}

　　}

　　/脚本

　　//创建axios实例

　　const service=axios.create({

　　BASE url:process . env . vue _ APP _ BASE _ API，//url=基本URL请求URL

　　超时：5000

　　})

结语

　　环境的配置和管理在项目建设中起着至关重要的作用。为项目配置不同的环境，不仅可以增加开发的灵活性，提高程序的扩展性，还可以帮助我们了解和分析项目在不同环境下的运行机制，建立全局观念。

　　这就是这篇关于Vue CLI模式和环境变量的文章。有关Vue CLI模式和环境变量的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。