美文网首页
vue多环境打包

vue多环境打包

作者: 年过古稀的Coder | 来源:发表于2020-04-13 21:35 被阅读0次

方法1

node属性process.argv

改属性为node执行命令获取到的命令集合

如打包命令为npm build dev则获取到集合['npm', 'build', 'dev'],则在集合中能获取到dev这个数值
在node环境中可以使用这个变量
具体可参考node文档

  • webpack.base.conf.js
    在这个文件下可以使用变量``process.argv`

则定义变量isProduction

var isProduction = 0;
for(var i = 0;i < process.argv.length;i++){
  if(process.argv[i]=="production"){
      isProduction = 1;
      break;
  }else if(process.argv[i] == "prev"){
      isProduction = 2;
      break;
  }
}

并且在webpackConfig.module.rules中为vue共用变量文件注入此变量

module: {
    rules: [
        {
            test: require.resolve('../src/constant'),
            loader: "imports-loader?isProduction=>" +  JSON.stringify(isProduction)
        }
    ]
}
  • vue中定义一个文件存放变量
var tmp = "";
if(isProduction == 1){          //生产
    tmp =  "生产环境地址";
}else if(isProduction == 2){    //预生产
    tmp =  "预生产环境地址";
}else{                          //开发环境
    tmp = "开发环境地址";
}

export const API_BASE_URL = tmp;
  • 修改 package.json 的script 语句
 "scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:dev": "npm run build -- dev"
  }

后续在vue项目中导入这个文件就能够使用

方法2

  • 在config文件夹中新建文件xx.env.js
'use strict'
    module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"xx环境要使用的地址"',
    }
  • 修改./build/webpack.prod.conf.js文件 修改 evn
//注释掉之前的代码
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

//修改后的代码
const env = require('../config/' + process.env.env_config+'.env')
  • 安装 cross-env 的插件
npm install cross-env -dev--save
  • 修改 package.json 的script 语句
 "scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js"
  }

方法三

在某个文件夹下定义一个存放地址的文件,每次打包前切换变量值

相关文章

  • vue多环境打包

    方法1 node属性process.argv 改属性为node执行命令获取到的命令集合 如打包命令为npm bui...

  • vue 多环境配置打包

    一、在package.json下添加打包配置 二、在跟目录下创建.env.production和.env.test...

  • vue-cli实现多环境运行打包编译

    vue-cli实现多环境运行打包编译 在开发过程中经常遇到这样的情况,开发或者打包需要去请求后台的不同环境(测试环...

  • vue-cli 多环境配置

    vue-cli 多环境配置 打包命令--mode xxx 用来区别是环境image 基本配置项目根目录下创建 .e...

  • vue 配置多环境打包发布

    项目目录如下: 项目结构 在./config文件夹下新建一个prod.env.js 的文件(此为集成测试环境) 修...

  • vue 配置多环境打包发布

    在做vue项目开发的时候,会有不同的环境,个人开发环境,公司测试环境,线上发布环境,每个环境下又需要到不同的服务器...

  • vue项目打包配置多环境

    在开发过程中经常遇到这样的情况,开发或者打包需要去请求后台的不同环境(测试环境,预上线环境,正式环境),虽然可以去...

  • 【转载】vue-cli2配置多环境打包

    原文链接:vue-cli2配置多环境打包[https://blog.csdn.net/chenlim87/arti...

  • Vue(CLI3.0)多环境配置问题2020

    vue-cli3.0多环境配置 通常开发运行项目时候只需要一个'development'(开发环境),打包时候却需...

  • vue环境搭建

    安装运行环境 大概的步骤 打包 目录结构解析 WebStorm配置Vue开发环境

网友评论

      本文标题:vue多环境打包

      本文链接:https://www.haomeiwen.com/subject/phsomhtx.html