zoukankan      html  css  js  c++  java
  • vue不同环境下的配置

    在做VUE项目开发的时候,项目会在不同环境下运行。

    常见的三种环境:

    1、本地开发环境。
    2、测试发布环境。
    3、线上生成环境。

    在不同的环境下,进行打包、部署调用API以及参数配置是不同的。

    如果每次进行打包的或运行的时候都要去手动修改代码,显然是不明智的。

    那么有没有一种可以通过在不同的环境下调用不同的API以及参数配置的方法呢?

    答案是坑定的。

    在 package.json 可以设置不同的业务场景:

    "scripts": {
      "dev": "vue-cli-service serve", // 开发环境
      "build:prod": "vue-cli-service build", // 生产环境
      "build:stage": "vue-cli-service build --mode staging" // 测试环境
    }

    在项目的根目录新增对应的配置文件

    不同的业务环境,对应不同的配置文件:

    解释:--mode staging 就是在指定的环境模式 staging 会调用 .env.staging 配置。

    默认不指定规则,开发环境为 development ,生成环境为 production

    具体配置文件如下:

    env.development

    # just a flag
    ENV = 'development'
    
    # base api
    VUE_APP_BASE_API = '/'

    env.production

    # just a flag
    ENV = 'production'
    
    # base api
    VUE_APP_BASE_API = '/test'

    如何配置进行配置呢?

    属性名必须以 VUE_APP_ 开头,比如:VUE_APP_XXX

    如何调用这些配置呢?

    process.env.ENV
    process.env.VUE_APP_BASE_API

    示例:

    module.exports = {
      publicPath: process.env.BASE_URL,
      devServer: {
        proxy: process.env.VUE_APP_SERVER
      }
    };

    判断不同的环境:

    if (process.env.VUE_APP_ENV !== 'development') {
      axios.defaults.baseURL = process.env.VUE_APP_SERVER;
    }

    打完收工!

  • 相关阅读:
    数据结构与算法之“图”
    数据结构与算法之队列、栈
    数据结构与算法之二叉搜索树
    ue mobile GI
    ue ios 用xcode 断点debug手机 显示call stack的环境搭建 /instrument 显示线程名/stat filestart
    ue 后效里宏的设置
    ue上 sceneColorMobile 在android 和ios上表现不同的问题
    减少ue编译shader的时间
    ue 搭建android/ios联机 debug环境
    对曝光的理解 autoExposure
  • 原文地址:https://www.cnblogs.com/e0yu/p/15765545.html
Copyright © 2011-2022 走看看