Vue-Cli 在 index.html 文件中进行环境判断
1、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
2、Vue-Cli3 模式的判断与环境变量配置
模式的分类
- development 模式用于 vue-cli-service serve
- test 模式用于 vue-cli-service test:unit
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,在build命令中使用development 模式:
"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 忽略