zoukankan      html  css  js  c++  java
  • vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在vue-cli3的项目中,
    npm run serve时会把process.env.NODE_ENV设置为‘development’;
    npm run build 时会把process.env.NODE_ENV设置为‘production’;
    此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

    打包时线上环境可能分多种,比如测试环境和生产环境等等。
    在vue-cli2中打包时可以修改 “build” 和 “config”中的文件来区分不同的线上环境
    而vue-cli3号称0配置,无法直接修改打包文件,那么怎么区分不同的线上环境呢?

    1.package.json添加命令"alpha"   

    "scripts": {
      "dev": "vue-cli-service serve",
      "serve": "vue-cli-service serve",
      "alpha": "vue-cli-service build --mode alpha",
      "build": "vue-cli-service build --mode build",
      "lint": "vue-cli-service lint",
      "test:e2e": "vue-cli-service test:e2e",
      "test:unit": "vue-cli-service test:unit"
    }
    

    2. 在项目根目录添加文件“.env.alpha”,其内容:

    NODE_ENV = 'production'
    VUE_APP_TITLE = 'alpha'
    

    3.在项目根目录添加文件“.env.build”,其内容:

    NODE_ENV = 'production'
    VUE_APP_TITLE = 'production'
    

    例: 如在测试生产环境build时不压缩js文件

    4.vue.config.js

    module.exports = {
      chainWebpack: config => {
        if(process.env.NODE_ENV === 'production') {
          // 测试生产环境, 不压缩js代码
          if (process.env.VUE_APP_TITLE === 'alpha') {
            config.optimization.minimize(false)
          }
        }
        config.resolve.alias
          .set('@', resolve('src'))
      }
    }
    
  • 相关阅读:
    Linux网络与服务管理
    输入两个数据,如果输入数据之和为5的倍数,那么就算是输了,停止游戏;如果赢了,接着输入数据。
    switch语句
    计算一个三位数的个位,十位,百位之和
    单分支和双分支选择结构程序设计
    register变量
    static变量
    auto变量
    长双精度类型
    双精度类型变量
  • 原文地址:https://www.cnblogs.com/alantao/p/10282477.html
Copyright © 2011-2022 走看看