温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2023-03-11 13:54:51 来源:亿速云 阅读:185 作者:iii 栏目:开发技术

这篇文章主要介绍“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模式的判断与环境变量配置

    模式

    模式的分类

    • development 模式用于 vue-cli-service serve

    • test 模式用于 vue-cli-service test:unit

    • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

    可以通过传递 --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_ 开头的变量才可以在全局使用

    关于“Vue-Cli怎么在index.html中进行环境判断”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI