vue cli3创建测试打包环境(通过development、production、alpha指定不同的接口地址)...
2020-04-28 18:44
1031 查看
前言:项目一般有开发环境,测试环境,生产环境;vue cli内置有开发和生产环境,可以用process.env.NODE_ENV区分,有时候我们和后台同事需要本地连接调试代码,又需要连接测试环境调试,发布的还有生产环境。关靠NODE_ENV无法区分3种baseUrl。下面加一种alpha环境变量,和production打包就productionSourceMap配置有区别,用于测试环境方便查看源码调试。
1、创建vue cli环境变量
- 在项目根目录创建文件 .env.build 编辑内容为
NODE_ENV = 'production' VUE_APP_BUILD = 'production'
- 在项目根目录创建文件 .env.alpha 编辑内容为
NODE_ENV = 'production' VUE_APP_BUILD = 'alpha'
两个文件NODE_ENV值都为production,以消除vue cli内部使用NODE_ENV变量导致打包出现差异
2、修改package.json启动模式
{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --mode build", "alpha": "vue-cli-service build --mode alpha" } }
build用户生产环境打包,alpha用于测试环境打包
3、修改vue.config.js配置
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', lintOnSave: process.env.NODE_ENV !== 'production', productionSourceMap: process.env.VUE_APP_BUILD !== 'production' // 生产环境去掉map文件 }
4、不同环境使用不同url
const dev = '/test' const alp = 'http://192.168.1.31:8443/api' const pro = 'http://111.111.111.111:8443/api' export const baseURL = process.env.NODE_ENV === 'development' ? dev : process.env.VUE_APP_BUILD === 'production' ? pro : alp
通过process.env.VUE_APP_BUILD可以取到配置在.env.[mode]文件里面的值
注:mode在build环境下为.env.build文件下VUE_APP_BUILD配置的值
转载于:https://my.oschina.net/kaikai1/blog/3066808
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- VUE 中配置生产环境和发布环境配置不同的接口地址 (运行npm run dev的时候,运行的是测试接口。npm run build打包项目的时候,打包的是服务器正式接口)
- Android Gradle 相同应用多包名打包,实现测试发布包分离,不同服务器地址以生成不同安装包
- Maven 如何为不同的环境打包 —— 开发、测试和生产环境
- maven通过profile不同,实现环境进行打包
- maven打包通过profiles指定开发环境
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- maven 为测试环境、生产环境等不同环境打包
- 通过Maven配置测试环境和开发环境连接不同的数据库
- Maven 如何为不同的环境打包 —— 开发、测试和生产环境
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- 【qtp脚本】实现自动创建目录并通过测试写字板生成指定个数的文件
- 通过Maven配置测试环境和开发环境连接不同的数据库
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- Maven 如何为不同的环境打包 —— 开发、测试和生产环境
- 通过Maven配置测试环境和开发环境连接不同的数据库
- Maven 如何为不同的环境打包 —— 开发、测试和产品环境
- vue生产环境开发环境配置不同的接口地址
- Maven 如何为不同的环境打包 —— 开发、测试和生产环境
- 通过Maven配置测试环境和开发环境连接不同的数据库
- Maven对不同的测试环境用不同的参数进行打包