Vue 项目分环境打包的方法示例
2018-08-03 08:31
811 查看
我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用
1、package.json
在build下面添加一个test运行命令
"test": "node build/build.js"
2、prod.env.js
在config -> prod.env.js 中修改代码
'use strict' // 读取系统运行时候的变量 const target = process.env.npm_lifecycle_event; // 控制台日志输出 console.log('env is deploying, current env is', target) // 判断环境变量,是test,还是build if (target == 'test') { var obj = { NODE_ENV: '"production"', API_ROOT: '"此处替换为测试环境地址"', } } else { var obj = { NODE_ENV: '"production"', API_ROOT: '"此处替换为测试环境地址"', } } module.exports = obj;
3.测试环境:
$ npm run test
正式环境:
``` $ npm run build ```
相关文章推荐
- vue项目打包部署到服务器的方法示例
- vue和webpack打包项目相对路径修改的方法
- vue 搭建项目环境方法步骤
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- Vue项目分环境打包的实现步骤
- Vue插件打包与发布的方法示例
- vue中Npm run build 根据环境传递参数方法来打包不同域名
- 在vue-cli项目中使用bootstrap的方法示例
- vue-cli 如何打包上线的方法示例
- 教你用Cordova打包Vue项目的方法
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法
- karma+webpack搭建vue单元测试环境的方法示例
- 使用electron将vue-cli项目打包成exe的方法
- vue完成项目后,打包成静态文件的方法
- vue项目打包部署_nginx代理访问方法详解
- vue.js 项目 环境搭建、打包发布
- vue项目tween方法实现返回顶部的示例代码
- vue 项目打包时样式及背景图片路径找不到
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- 16.如何做到webpack打包vue项目后,可以修改配置文件