Vue项目如何根据不同运行环境打包项目
作者:小破孩呦
这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
场景
在开发过程中,通常会遇到这样的问题:
在开发环境、测试环境和生产环境中我们会用到不一样的服务接口
在生产环境出现了出现了某个bug,但是在测试环境不存在,这时候就需要开发环境访问生产环境的接口
多端一体的项目模式
这些情况都要手动去切换接口地址,这样会很麻烦,有时还可能出现操作失误。
这时候就需要用到cross-env进行分环境配置了,根据不同的环境,我们使用对应的接口,这样也就不用手动去操作。
第一步 安装依赖 cross-env
使用 cross-env 解决跨平台问题。
在终端运行:
npm install cross-env --save-dev // 安装 cross-env 依赖
第二步 修改 package.json 文件
在 package.json 中 scripts 属性中 build 命令替换为:
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:test": "cross-env vue-cli-service build --mode test", "build:prod": "cross-env vue-cli-service build --mode production", },
当我们需要配置多个环境变量时,未避免package.json命令过长,这时候就可以选择模式配置
默认模式
vue-cli项目下默认有三种模式:
development
模式:在 vue-cli-service serve 时使用。production
模式:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。test
模式:在 vue-cli-service test:unit 时使用。
每个模式都会将 NODE_ENV设置为模式的名称,比如在development模式下,NODE_ENV为 ‘development’。
自定义模式
自定义模式需要通过.env文件进行配置,.env文件分为以下类型:
.env
,在所有的环境中被载入.env.local
,在所有的环境中被载入,但会被 git 忽略.env.[mode]
,只在指定的模式中被载入.env.[mode].local
,只在指定的模式中被载入,但会被 git 忽略[mode]
是自定义的模式名称
例:通过在package.json脚本中增加 --mode [mode]来指定模式。
// package.json { "scripts": { "build:testing": "cross-env vue-cli-service build --mode testing", } }
第三步 创建不同环境的文件
在项目根目录新建 .env.development
文件:
// 开发环境模式 // 环境变量 NODE_ENV=development // 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中 VUE_APP_ENV = 'development'
在项目根目录新建 .env.test
文件:
// 测试环境模式 // 环境变量(这里的环境变量是跟打包有关的,production则会进行压缩代码等,真正跟每个环境有关的变量是下面以VUE_APP开头的变量) NODE_ENV=test // 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中 VUE_APP_ENV = 'test'
在项目根目录新建 .env.production
文件:
// 线上环境模式 // 环境变量 NODE_ENV=production // 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中 VUE_APP_ENV = 'production'
第四步 根据配置进行判断使用不同的环境服务
let baseUrl = ''; let env = process.env; if (env.VUE_APP_ENV === 'development') { baseUrl = `http://xxx/`; // 本地服务地址 } else if(env.VUE_APP_ENV === 'production'){ baseUrl = `http://xxx/`; // 正式环境服务地址 }else if(env.VUE_APP_ENV === 'test'){ baseUrl = `http://xxx/`; // 测试环境服务地址 } export { baseUrl, env }
第五步 打包项目
// 测试环境打包项目 npm run build:test // 生产环境打包项目 npm run build:prod
结果测试:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。