vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue-Cli在index.html进行环境判断

Vue-Cli如何在index.html中进行环境判断

作者:小火车况且况且

这篇文章主要介绍了Vue-Cli如何在index.html中进行环境判断问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue-Cli在index.html进行环境判断

主要是使用<% %> 语法进行判断

<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow"  />
<!-- 开发环境 -->
<% if(process.env.NODE_ENV === 'development'){ %>
  <script src="//unpkg.com/vue@3"></script>
<% } else if(process.env.NODE_ENV === 'production'){ %>
  <script src="//unpkg.com/element-plus"></script>
<% } else { %>
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
<% } %>
<title>这是测试</title>
# start 这是正常的if判断
<% if(process.env.NODE_ENV === 'development'){ %>
<% } %>
# end 这是正常的if判断


# start 标准的if else
<% if(process.env.NODE_ENV === 'development'){ %>
<% } else { %>
<% } %>
# end 标准的if else


# start 标准的 if else if
<% if(process.env.NODE_ENV === 'development'){ %>
<% } else if(process.env.NODE_ENV === 'production'){ %>
<% } %>
# end 标准的 if else if

Vue-Cli3模式的判断与环境变量配置

模式

模式的分类

可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,在build命令中使用development 模式:

package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },

模式的匹配

讨论模式的匹配前需要对以下几个概念有所了解

1.npm命令(如npm run serve)到底做了什么

可以把 npm run serve 当做是 npm run package.json 里面的scripts的value,实际上执行的是vue-cli-service serve;其他的npm命令实际执行的命令也是如此

如果将“server”键改为“dev”

"dev": "vue-cli-service serve"

控制台输入的命令就要输入npm run dev,实际上执行的也是vue-cli-service serve

2.模式与NODE_ENV 变量的关系

当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件(.env文件)中载入

.env文件没有配置NODE_ENV 变量

此时NODE_ENV 变量的值将取决于模式,例如,在 production 模式下被设置为 “production”,在 test 模式下被设置为 “test”,默认则是 “development”

vue-cli-service serve默认对应development模式,执行npm命令后NODE_ENV=“development”

如果改变了默认的vue-cli-service serve

"serve": "vue-cli-service serve --mode production" 此时执行npm run serve命令后模式为 production,相应的NODE_ENV=“ production”

在.env文件中配置了NODE_ENV 变量

当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入

例如 运行npm run serve 默认模式是development,此时会加载.env.development文件,NODE_ENV 变量的值就是文件中定义的值

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

为什么是这个模式

默认情况下执行vue-cli-service serve后模式就变为development;执行vue-cli-service test后模式就变为test;执行vue-cli-service build后模式就变为production

通过传递 --mode 选项参数为命令行覆写默认的模式。

"build": "vue-cli-service build --mode development" //将build默认的production模式转变为development

环境变量配置

现在的模式如果为x,则在.env.x中编辑需要的环境变量

只有以 VUE_APP_ 开头的变量才可以在全局使用

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文