通过命令行参数传输基于vue cli的多环境配置

大多数项目都有生产环境和开发环境，一般来说应该足够了，但有时需要sit、uat、本地环境等。这时候通过标注切换环境是相当麻烦的。像下面这样切换环境很方便

Npm运行服务//默认本地开发环境

Npm运行service-sit//在本地开发中使用sit环境

npm运行服务中使用的Uat环境-uat //本地开发

Npm运行构建//默认情况下，打包后使用生产环境

Npm运行构建-本地//打包后使用本地环境

Npm运行构建-sit //打包后使用sit环境

` NPM运行构建-uat//打包后使用UAT环境

如果您不熟悉@vue/cli，建议阅读本文https://www.jb51.net/article/138055.htm

我们首先在根目录下创建一个vue.config.js文件，如图所示

vue.config.js代码如下：

const web pack=require(' web pack ')const environment=require('。/build/environment)模块. exports={ baseUrl: '/wxperp/'，configurewebpack k : { plugins :[new web pack。definepreplugin({ ' process . env . stage ' : JSON . stringify(environment . stage)，' process . env . local _ URL ' : JSON . stringify(environment . local URL)})]} } new webpack . definepreplugin的目的是允许您创建一个可以在编译时配置的全局常量。

然后在根目录中创建一个构建文件夹，这将创建一个环境. js文件

Environment.js代码如下：

获取命令行变量const OS=require(' OS ')//const config argv=JSON . parse(process . env . NPM _ config _ argv)const origin=config argv . origin . slice(1)const stage=origin[1]？原文[1]。替换(///g，)， ''//本地ip地址让local URL try { const network=OS . network interfaces())本地URL=network[object . keys(network)[0]][1]。address } catch(e){ local URL=' localhost ' } local URL=' http://' local URL '/'模块。导出={stage，localurl}此阶段是您输入的变量。例如，如果您输入npm run serve -sit，stage的值就是sit。

这个localUrl是你的本地ip，但是很多人不应该使用它。我们公司很特别。开发时，接口请求的地址都是自己的本地服务器。如果没有自动获取本地ip，那么每个同事都要在配置文件中保留一份自己的ip地址的副本，非常麻烦，所以就自动获取了。

然后在src目录下创建一个config.js，记得在main.js中引用这个config.js

Environment.js代码如下：

(()={ const URL map={ local : process . env . local _ URL ' API '，sit : ' http://XXX . XXX . xxx3360 XXX/sit/API '，uat : ' http://XXX . XXX . xxx: XXX/UAT/API '，prod : ' http://XXX . XXX . xxx3360 XXX/prod/API ' }//sit，UAT，Prodlet阶段=process.env.stage//development,生产const如果(nodeEnv==='production '！stage){ stage=' prod ' } else {//stage不存在。默认为本地开发环境stage=stage | | ' local ' } console . log(' IP 3360 ' URL map[stage]))})()我们进入npm run serve -sit，页面打印如下：

重复一下，process.env.NODE_ENV是由@vue/cli提供的，它似乎有三个值(开发、生产、测试)。

通过运行npm run serve，您得到的是开发

当您运行npm运行构建时，您得到的是生产

运行npm run test得到的是test(我没试过)

我的默认打包是打包生产环境，当然你也可以输入参数来打包其他环境

摘要

以上是边肖推出的基于vue cli的多环境配置。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！