国外镜像 北斗系统 mysql安装 作用域 dart 抖音 x86 sas jScrollPane sql server 视频教程 jquery点击事件 jq获取元素 bootstrap侧边栏 mysql默认密码 mysql查看锁表 python安装 python怎么调用函数 python使用正则表达式 python中集合 python函数返回 java正则表达式 java连数据库 java8函数式接口 配置java开发环境 java循环语句 学习java基础 java替换字符串 java入门代码 linux目录 linuxsudo命令 xp系统修复 电子书之家 groupby 高效能人士的七个习惯pdf java程序设计基础 iphone滚动截屏 labview宝典 3389扫描器 复制到剪贴板 linux多线程编程
当前位置: 首页 > 学习教程  > 编程语言

vue根据环境不同配置不同的打包命令(史上最简单)

2020/11/4 14:29:27 文章标签:

前提:各种vue环境已经配置完毕,vue-cli脚手架安装好。 1.在项目根目录创建如下图所示三个文件,分别取名为 .env.development .env.production .env.test 2.然后在这三个文件里依次写入如下内容: NODE_ENV ‘development’ VUE_…

前提:各种vue环境已经配置完毕,vue-cli脚手架安装好。
1.在项目根目录创建如下图所示三个文件,分别取名为 .env.development .env.production .env.test
在这里插入图片描述
2.然后在这三个文件里依次写入如下内容:

NODE_ENV = ‘development’
VUE_APP_CURENV = ‘development’

NODE_ENV = ‘production’
VUE_APP_CURENV = ‘production’

NODE_ENV = ‘test’
VUE_APP_CURENV = ‘test’

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.在项目vue.config.js文件里添加如下代码(没有vue.config.js的可以手动在项目根目录创建)

switch(process.env.VUE_APP_CURENV){
case ‘development’:
console.log(‘当前运行环境为:开发环境’)
break;
case ‘test’:
console.log(‘当前运行环境为:测试环境’)
break;
case ‘production’:
console.log(‘当前运行环境为:生产环境’)
break;
}

在这里插入图片描述
4.在项目api.js里添加如下代码(api.js为项目中封装axios文件,可以根据自己实际封装情况而定;其中comUrl为公共接口地址,可根据自己项目实际情况而定)

switch(process.env.VUE_APP_CURENV){
case ‘development’:
comUrl = ‘http://localhost:3333’;
break;
case ‘test’:
comUrl = ‘http://localhost:5555’;
break;
case ‘production’:
comUrl = ‘http://localhost:6666’;
break;
}

在这里插入图片描述
5.打开package.json文件,修改打包命令如下图
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
“lint”: “vue-cli-service lint”
},

在这里插入图片描述
至此我们的项目已经配置完毕了,然后可以通过npm run serve启动项目,npm run build 打包项目(生产环境)npm run build:test 打包项目(测试环境)
在这里插入图片描述
在这里插入图片描述
PS:可以仿照上面配置配置其他各种环境例如培训环境等等。


本文链接: http://www.dtmao.cc/news_show_350172.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?