关于vue配置多环境

比如我要配置一个测试环境用的
在config文件夹里,新建一个pre.env.js(自定义名字)
'use strict'
module.exports = {
NODE_ENV: '"pre"' // 自定义名字
}

在package.json中 script标签里加上一句
"build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js"

这里的意思是,当执行npm run build:pre时,执行config文件里面pre的文件

直接这样做是会报错的,还要安装cross-env这个包
使用 npm install --save cross-env

在使用vue-cli时,npm run build 是被默认写成执行pro(生产环境)的,因此,执行以上代码,并没有正确运行测试环境。

在build文件夹里,webpack.prod.conf.js文件:

可见原来的env是引入的prod.env:
// const env = require('../config/prod.env')

修改为:
const env = require ('../config/' + process.env.env_config + '.env')

自己可以打印一下 这时process.env.env_config 所指向的时npm run build:传的值

这时正确使用npm run build:pre 是可以打包成功的,
但是由于将原本固定的prod.env修改为了动态的,
所以在执行npm run build 会报错
因为在package.json中 原有的script中build写的执行文件直接是build.js,指向的是原来写死的prod.env.js文件。
需要修改biuld:
"cross-env NODE_ENV=production env_config=prod node build/build.js"
跟build:pre不同的是 node_env需要指向config中的文件名称,与之对应的是env_config的名字。
这样便可以打包成功了。
build.js中有一段描述:
const spinner = ora('building for prod....')
可以动态修改为:
const spinner = ora('building for ' + process.env.env_config)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 5,226评论 0 2
  • Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。 本文介绍如何使用 npm 脚本(n...
    邓海琪阅读 5,647评论 0 0
  • 一、什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令。 ...
    猪猪9527阅读 393评论 0 0
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 今儿又下载了王者,本来不玩,可是lol是越来越没时间,我就在想啊,什么时候有勇气删除手机里的3个游戏,只有三个游戏...
    名字要长啊啊阅读 134评论 0 1