1.首先替换你的项目根目录中的下列文件来指定环境变量:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
注:如果有就替换掉,如果没有就新建,[mode]代表变量,.local会被git忽略
附:这里是我项目配置的三个环境配置
一个环境文件只包含环境变量的“键=值”对:
NODE_ENV = 'test'
NODE_ENV = 'development'
NODE_ENV = 'production'
注:为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写。
如果在环境中有默认的 NODE_ENV,你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV
2.然后在package.json中配置不同环境的打包命令:
附我的打包命令代码:build为默认打包命令,这里我圈起来的就是我们刚才配置的不同环境的打包命令
重点:–mode 选项参数为命令行覆写默认的模式,例如,如果你想要在构建命令中使用开发环境变量就要加上–mode
3.然后开始配置不同环境对应不同的请求前缀 ,也就是不同的域名或者ip地址,一般这个文件是放在config文件夹中你随便创建一个js文件
附我的不同环境下的域名(这里的域名我随便写的,baseurl = ‘这里写你的请求地址’)
4.然后在你的请求js文件中使用baseUrl,附我的request.js
然后你就可以打包不同的环境了
记得先安装依赖(安装依赖方法:在你的终端里写cnpm i,然后回车,等安装完就OK了,如果你运行cnpm i报错了,就在终端里执行npm install -g cnpm --registry=https://registry.npm.taobao.org,然后再安装依赖)
例如我的代码现在的打包命令就是: npm run test / npm run dev / npm run prod(三个环境选择一个你需要的进行打包)——>cd dist ——> http-server,搞定
觉得小弟写的还不错的,记得点赞打赏,感激不尽