uniapp如何创建项目详细介绍，多环境配置、路由配置、代理配置、请求封装等。完整的搭建一个项目环境。

最新推荐文章于 2024-07-16 16:03:20 发布
最新推荐文章于 2024-07-16 16:03:20 发布
阅读量3.9k 收藏 9
点赞数 3
分类专栏： uniapp专栏 文章标签： vue.js html5 node.js css3 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41279808/article/details/107103695
版权
本文详细介绍了如何使用HBuilderX和vue-cli创建uniapp项目，包括环境配置、跨域设置、路由管理和请求封装。推荐使用yarn进行项目管理，并提供了多环境配置的步骤，帮助开发者顺利搭建uniapp项目环境。
摘要由CSDN通过智能技术生成

1.前期准备及前言

一般可以使用HBuilderX创建项目，为了本次博客的完整性，先讲解一下HBuilderX创建uniapp项目。下载开发工具地址：https://www.dcloud.io/hbuilderx.html。由于现在项目开发都是不同的人员配置进行开发，所以一般都在使用jenkins协作开发，所以我比较推荐yarn或咋npm命令建立项目，通过码云托管之后便可以实现自动部署服务器了。

2.HBuilderX工具创建项目

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

运行uni-app

  1. 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

发布uni-app

3.命令创建项目（通过vue-cli命令行）

1.全局安装vue-cli

npm install -g @vue/cli

2.创建uniapp项目

使用正式版（对应HBuilderX最新正式版）

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

3.选择项目模板

4.运行/发布

npm run dev:%PLATFORM%

npm run build:%PLATFORM%

我基本上喜欢使用yarn来创建项目

给大家介绍一下yarn吧!!!!!!!!!!（网站：https://yarn.bootcss.com/）Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的（例如 JavaScript）代码。 Yarn 能够快速、安全、 并可靠地完成这些工作，所以你不用有任何担心。

1.速度快

Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

2.超级安全

在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。

3.可靠

使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

怎么使用yarn

  • 这里我使用的是 npm 的安装方式
npm install -g yarn
  • 查看是否安装成功
yarn -v

 

  • 常用命令
# 初始化一个项目
yarn init
# 装包
yarn add packagename
yarn add packagename --dev
# 更新包
yarn upgrade packagename
# 删除包
yarn remove packagename
# 安装所有包
yarn
yarn install
# 发布包
yarn publish
# 查看包的缓存列表
yarn cache list
# 全局安装包 == npm -g
yarn global

 4.项目创建之后的环境配置

在项目创建完成之后会得到如下的目录结构

通过yarn生成了依赖node_modules而public是项目的入口

1.多环境配置

uniapp其实和vue一样都是可以多环境配置的，我们来看一下具体操作步骤吧！

在刚刚创建的项目下创建一个文件夹创建一个js文件

里面包含服务器请求地址配置（1）线上环境使用production区分，则其他情况下都属于线下环境

export function objApi(){
	let objTo = {}
	if (process.env.NODE_ENV === 'production') {
		objTo.ApiURL = 'https://h5.xxxxx.com'
		objTo.BASE_URL = objTo.ApiURL + '/mop'
		objTo.AppId = 'wxdcaeda296ace931a'
		
		// 聊天线上
		objTo.CHAT_URL = 'ws://h5.xxxxx.com'
		return objTo
	} else {
		objTo.ApiURL = 'http://xxxxx.natapp1.cc'
		objTo.BASE_URL = '/mop'
		objTo.AppId = 'wx34bc5cd3b4385f1b'
		
		// 聊天测试
		objTo.CHAT_URL = 'ws://xxxxx.natapp1.cc'
		return objTo
	}
}

部署方式改变：

因为加上了多环境配置，所以部署方式也得改变一下，部署线上的时候不改变

直接使用yarn build:h5（如果是h5项目的话）

测试环境配置：

1.首先我们在项目里面找到package.json这个文件

2.修改文件的部署信息

"build:h5-t": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build",

 部署命令：yarn build:h5-t

2.跨域配置

1.在项目里面找到manifest.json文件

2.如果是h5的情况下加上如下代码：

"h5": {
		"devServer": {
			"port": 8000,
			"disableHostCheck": true,
			"proxy": {
				"/mop": {
					"target": "http://xxx.natapp1.cc",
					"changeOrigin": true,
					"secure": false
				}
			}
		}
	}

3.路由配置

找到page.json文件

{
			"path": "pages/tab/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor":"#FFD912",
				"navigationBarTextStyle":"black",
				"enablePullDownRefresh": true,
				"onReachBottomDistance":50,
				"app-plus": {
					"titleNView": false ,//禁用原生导航栏
					"softinputNavBar":"none"
				}
			}
		},

4.请求封装

在项目下新建一个文件夹fetchjs封装

/**
 * uniapp请求方式封装
 */
import { md5 } from '@/common/tools/md5.js'
import { objApi } from '@/common/fetch/baseUrl/baseApi.js'
import { isWechat } from '@/common/tools/wxshare.js'

const secretKey ='hskjfhsjkfh@1$'//加密字符串
const version = '1.0.0'//版本号

//请求封装
export function fetch(url,params,type='GET',header,async=false){
	if(header.typeof == null){	
	  let dataTime = undefined
	  let strTime = undefined
	  let token = undefined
      dataTime = new Date().getTime();
      strTime = secretKey+dataTime;
	  if(isWechat()){
		  header = {
			'sign':md5.hex_md5(strTime).toUpperCase(),
			'timestamp':dataTime,
			'userId':uni.getStorageSync('userId'),
			'version':version,
			'bizCodeEnum':'WX'
		  }
	  }else{
		 header = {
			'sign':md5.hex_md5(strTime).toUpperCase(),
			'timestamp':dataTime,
			'userId':uni.getStorageSync('userId'),
			'version':version,
			'bizCodeEnum':'H5'
		 } 
	  }
	}
	return new Promise((resolve,reject) => {
		uni.showLoading({
		    title: '加载中'
		})
		uni.request({
			url: objApi().BASE_URL+url, 
			data: params,
			method: type,
			dataType: "json",
			header: header,
			success: (res) => {
				uni.hideLoading()
				if(res.data.code === 20000 && res.data.success){
					resolve(res)
					reject(0)
				} else if (res.data.code === 10001) {
					uni.navigateTo({
							url: '/pages/login/index?type=1'
						})
				} else if (res.data.code === 40001) { // 系统错误
					uni.redirectTo({
					    url: '/pages/null/index?type=1'
					})
				}  else {
					uni.showToast({
						title: res.data.message,
						icon:'none',
						duration: 2000
					})
					resolve(res)
					reject(1) // 错误返回
				}
			},
			fail: () => {
				uni.hideLoading()
				reject(1)//网络异常回调
				resolve(1)
				uni.showToast({
					title:'请求失败',
					icon:'none',
					duration: 2000
				})
			}
		})
	})
}
export function uploadFile(url,tempFilePaths,formData,header) {
	if(header === undefined){
	  let dataTime = undefined
	  let strTime = undefined
	  let token = undefined
	  dataTime = new Date().getTime();
	  strTime = secretKey+dataTime;
	  if(isWechat()){
		  header = {
			'sign':md5.hex_md5(strTime).toUpperCase(),
			'timestamp':dataTime,
			'userId':uni.getStorageSync('userId'),
			'version':version,
			'bizCodeEnum':'WX'
		  }
	  }else{
		 header = {
			'sign':md5.hex_md5(strTime).toUpperCase(),
			'timestamp':dataTime,
			'userId':uni.getStorageSync('userId'),
			'version':version,
			'bizCodeEnum':'H5'
		 } 
	  }
	}
	return new Promise((resolve,reject) => {
		uni.showLoading({
		    title: '加载中'
		})
		uni.uploadFile({
			url: objApi().BASE_URL+url, 
			filePath: tempFilePaths,
			name: 'file',
			header: header,
			formData: formData,
			success: (uploadFileRes) => {
				uni.hideLoading()
				resolve(JSON.parse(uploadFileRes.data))
				reject(0)
			},
			fail:(err) => {
				uni.hideLoading()
				resolve(err)
				reject(1)
			},
		})
	})
}

各位小伙伴们，基本上一个项目就这样在搭建完成了，现在就可以去进行把玩uniapp了

Hadden_Jacob
关注
专栏目录
相关--uniapp如何创建项目详细介绍，多环境配置、路由配置、代理配置、请求封装等。完整的搭建一个项目环境
代码青春
09-16 818
https://blog.csdn.net/baidu_41279808/article/details/107103695?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-107103695.nonecase&utm_term=uniapp%20%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE
uni-app 自己封装的config.js
05-17
uni-app 自己封装的config.js 配置，链接的格式等数据。。。。。。。。。。。。。。。。。。
一站式解决方案：uni-app条件编译及多环境配置，appid动态修改攻略！
最新发布
weixin_45734165的博客
07-16 1708
在企业级的应用中，通常会分为，开发、联调、生产等多个环境，一个项目可能要发布到多个微信小程序，在工程化中，通过使用不同的打包命令设置不同的环境变量，解决不同环境各变量的内容需手动修改的问题，比如：接口、前缀、appid等；在使用uniapp开发项目时，通常使用Hbuilder可视化运行项目，点击运行编译出来都代码环境是（development），点击发布运行编译出来的代码是（production），分别对应开发和生产，使用process.env.NODE_ENV来获取运行环境。，存放相关环境变量的信息；
使用Jenkins进行Android自动打包
dmx的专栏
08-21 2万+
之前App在提交测试和最终部署的过程中App打包一直是由开发人员来完成的，由于项目比较大， 再加上Android打包本身就比较慢，所以每次打包还是很耗时的。并且按照严格的研发流程来讲，开发人员应该只负责提交代码，测试和部署过程中的打包都不应该由开发人员来完成，所以我就想着给测试和运维人员搭建一个可以自动打包的环境。后来在网上看到很多网友分享使用Jenkins进行Android自动打包的文章，几经尝试
uniapp：HbuildeX项目实现jenkins自动化打包上传
mosowe
06-06 5048
ubuntu系统上的jenkins部署基础指令，发送给windows服务器上，windows服务器使用HBuilderX软件的cli.exe执行相关cli命令打包，然后jenkins再调用接口下载打包后的文件。使用pm2后会导致npm包安装失效，貌似是因为在pm2中又进行了一次转译啥的，导致py里面的相关路径可能产生问题，致使os.system命令进入项目文件夹进行npm包安装失效。因对接jenkins所以需要开发对应的接口请求来满足相关的指令发送与文件传输。项目使用域名来控制环境变量，做好相关配置即可。
【uni-app教程】四、UniAPP 路由配置及页面跳转
热门推荐
我有满天星辰的博客
03-03 2万+
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下整下来，下载完成后再进行展示，此时终端界面会有等待提示。getCurrentPages0函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个。注意：getCurrentPages 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。url为将要跳转的页面路径，路径后可以带参数。说明：页面生命周期的 onLoad()监听页面加载，其参数为上个页面传递的数据，如。
uin-app
R2982766987的博客
03-07 825
uni-app框架介绍及环境配置 uni-app是什么？可以用来做什么？ uni,读作youni,统一的意思。DCloud（数字天堂（北京）网络技术有限公司）基于Vue.js开发的前端应用框架，开发者写一套代码，就能发布到iOS. Android、 H5、以及 各种小程序平台。 2012年，DCloud开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备 2015年，DCloud正式商用了自己的小..
uniApp项目创建
m0_67388537的博客
07-15 3173
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
uniapp项目创建
qq_45796592的博客
02-18 1122
uniapp配置
二、 新建一个uni-app项目
星银色飞行船的博客
02-26 639
1. 打开HBuilderX编辑器 文件->新建->项目 2. 选择uni-app 填写项目名称 选择存储路径 3. 如果不是云开发的不需要勾选 直接点击创建 即可创建一个新项目 4. 创建项目成功的效果图，以及文件的大致含义 5. 运行->运行到浏览器->谷歌 6. 选择手机模式 选择iphone12pro的模拟尺寸 如下效果图 ...
Uniapp 创建项目
Tongyao
06-07 228
打开HBuilderX，文件 – 新建 – 项目选中uni-app，输入项目和项目地址，点击创建按钮。 创建好了，可以码代码了！！！
《node+koa2+uniApp+mysql 项目搭建到部署 》[保姆级步骤三]
学全栈、大前端方向，就找前端早间课
03-21 225
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。— 关注我：前端路上不迷路 —
《node+koa2+uniApp+mysql 项目搭建到部署 》[保姆级步骤四]
学全栈、大前端方向，就找前端早间课
03-21 217
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。— 关注我：前端路上不迷路 —
vue配置代理vue.config.js后不生效（小坑）
m0_67392182的博客
03-09 4858
我的项目使用vue-cli4脚手架搭建的，想要修改webpack配置，需要手动在根目录下面添加一个vue.config.js文件，会自动识别该文件。附上我的配置： // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下，V
怎么创建一个uniapp项目
Dasy_R的博客
06-28 608
安装hbuilderX,然后点击左上角的新建-项目即可弹窗新建项目的弹窗 然后选择uni-app项目即可， 选择最简单的进行创建 创建简单的模板之后可以点击上边的按钮进行运行或者导航栏的运行并选择运行方式 第一次运行会自动安装编译插件，然后编译成功之后就会在浏览器打开一个页面 这样既可看到项目运行了 ...
如何创建uni-app项目
Sun914u的博客
03-07 789
- 启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建 - 项目结构 |-- components uni-app组件目录 |-- pages 页面目录 |-- static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 |-- main.js Vue入口文件 |-- App.vue...
uniapp如何创建一个项目
qq_44791442的博客
12-11 679
uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Androiid、H5、以及各种小程序（微信、支付宝、百度、头条）等多个平台。即使不跨端，uniapp也是很好的小程序开发框架。
uniapp创建/运行/发布项目
weixin_45618535的博客
12-25 6662
运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
uniapp路由配置
09-19
对于uniapp的路由配置，你可以使用uni-simple-router插件来简化配置过程。首先，安装uni-simple-router插件，并在项目中导入该插件。然后，在路由文件中配置路由表，指定需要跳转的路径和对应的组件。同时，你还可以根据需要设置前置守卫，用于在跳转前进行权限验证或其他操作。此外，uniapp的路由配置相对简单，不需要像微信小程序那样考虑路由层级限制的问题。 示例代码： ``` // 安装uni-simple-router插件 npm install uni-simple-router // 在路由文件中配置 import Vue from 'vue'; import Router from 'uni-simple-router'; Vue.use(Router); const router = new Router({ routes: ROUTES // 路由表 }); // 全局路由前置守卫 router.beforeEach((to, from, next) => { if (to.flag) { // 当前进入的路径 } next(); }); export default router; ``` Uniapp的路由配置相对于其他插件来说更加简单，且不需要注入Vue实例中。这让配置过程更加方便快捷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值