怎么在vue cli中通过命令行传参实现多环境配置?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
首先在根目录下面创建一个vue.config。js文件,如图
const webpack =,需要(& # 39;webpack& # 39;)
const environment =,要求(& # 39;。/构建/环境# 39;)
module.exports =, {
,baseUrl: & # 39;/wxperp & # 39;
,configureWebpack: {
,插件:[
,new webpack.DefinePlugin ({
,& # 39;process.env.STAGE& # 39;:, JSON.stringify (environment.stage),
,& # 39;process.env.LOCAL_URL& # 39;:, JSON.stringify (environment.localUrl)
,})
,)
,}
}
新webpack.DefinePlugin的作用是允许你创建一个在编译时可以配置的全局常量
然后在根目录创建一个构建文件夹,里面创建一个环境。js的文件
const os =,需要(& # 39;操作系统# 39;)//,获取命令行变量
const configArgv =, JSON.parse (process.env.npm_config_argv)
const original =, configArgv.original.slice (1)
const stage =,原始[1],?,原始[1].replace (/,/g, & # 39; & # 39;),:, & # 39; & # 39;//,本地ip地址
let localUrl
try {
,const network =, os.networkInterfaces ()=,localUrl 网络[种(网络)[0]][1].address
},catch (e), {=,localUrl & # 39; localhost # 39;
}
时间=localUrl & # 39; http://& # 39;, +, localUrl +, & # 39;/& # 39;
module.exports =, {
,舞台,localUrl
}
这就个阶段是你输入的变量,比如你输入<代码> npm运行服务坐>
这坐个localUrl就是你本地的ip,不过很多人应该用不到,我们公司比较特殊,开发的时候,接口请求的地址都是请求的自己本地服务器,如果不自动获取本地ip,那么每个同事都得在配置文件中保留一份自己得ip地址,很麻烦,所以就自动获取了。
接下来再src目录下面创建一个config.js,记得在main.js中引用这个配置。js
Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。 看完上述内容,你们掌握怎么在Vue cli中通过命令行传参实现多环境配置的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读! 
((),=祝辞,{
,const urlMap =, {
,当地:process.env.LOCAL_URL +, & # 39; api # 39;
,坐:& # 39;http://xxx.xxx.xxx: xxxx/坐/api # 39;
,uat: & # 39; http://xxx.xxx.xxx: xxxx/uat/api # 39;
,刺激:& # 39;http://xxx.xxx.xxx: xxxx/刺激/api # 39;
,}//坐下,uat,刺激
,let stage =process.env.STAGE//开发、生产
,const nodeEnv =process.env.NODE_ENV
,//nodeEnv为生产并且阶段不存在默认为生产环境
,if (nodeEnv ===, & # 39;生产,,,,,!阶段),{=,stage & # 39;促使# 39;
,}else {
,//阶段不存在默认为本地开发环境=,,stage stage | |, & # 39;当地# 39;
,}
,console.log (& # 39; ip: & # 39;, +, urlMap[阶段])
})() 怎么在vue cli中通过命令行传参实现多环境配置
