uniappH5开发环境搭建以及(开发,测试,生产)环境打包

	此次开发uniapp h5让我感受到了莫大的痛苦与折磨,现已解决完成,特总结以下经验希望对第一次开发uniappH5的朋友有所帮助,如果有什么问题欢迎关注交流!

一、通过uniapp 的cli指令创建项目
1.全局安装vue-cli
npm install -g @vue/cli
在这里插入图片描述

2、创建uniapp

vue create -p dcloudio/uni-preset-vue my-project

在这里插入图片描述
在创建的过程中uniapp 会提示选择模板类型:一般情况下选择-默认模板-就行,实际情况根据自己开发项目类型进行选择
3.启动项目
在自己的项目路径下打开终端,输入指令:npm run serve在这里插入图片描述
4.打包项目
在自己的项目路径下打开终端,输入指令:npm run build; 这个指令打包好以后代码在/unpackage/dist/build/下面,如果没有,请沿着根目录找/dist
在这里插入图片描述
二,根据开发环境不同打包到 /dist 下不同的文件夹下面
1.首先需要在package.json中加入scripts脚本

"dev": "cross-env UNI_OUTPUT_DIR=dist/build/dev NODE_ENV=devlopment UNI_PLATFORM=h5 vue-cli-service uni-build",

在这里插入图片描述

dev,master,test是自定义的一个命令名字,你可以根据自己的需求进行更改,UNI_OUTPUT_DIR是你打包文件后输出的文件目录,这个参数尤为重要,他决定了打包后分包在不同的文件夹下面;

NODE_ENV

配置你当前所处的环境位置,配置好后可直接通过

process.env.NODE_ENV

拿到你当前的环境变量参数,从而实现分发不同的域名或者其他操作!!!

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值