uniapp中配置开发环境和生产环境

uniapp在开发的时候,可以配置多种环境,用于自动切换IP地址,用HBuilder X直接运行的就是开发环境,用HBuilder X发布出来的,就是生产环境。

1.使用HBuilder X创建原生的uniapp程序

选择vue3

2.什么都不改,就可以正常运行了

3.增加a.js

里面的代码主要就是根据环境进行判断后,返回需要的值

html 复制代码
const CONF = {
	baseUrl: process.env.NODE_ENV === 'development' ? '开发环境' : '测试环境'
}

4.在index.html中直接引用

5.使用的地方直接输出

6.效果

特别注意:

上面的操作,只能在开发环境下使用,肯定没有问题的,当我们发行的时候

将会生成静态的文件,此时刚才的a.js就没有了

需要在根目录中,自己加上这个文件,但是这个a.js的内容就不是上面的内容了,因为此处就把a.js当做静态的文件,需要修改成直接赋值的内容

然后使用iis就可以发布了。

效果:

拓展:

也可以直接把IP地址写死,然后直接访问JSON文件的内容也行,使用的时候,随时都可以进行修改。其实就是上面的a.js的操作。

1.创建一个JSON格式的文件

2.使用

3.效果

4.其实2者的操作都是访问静态文件,差不多

a.js是后期增加的,操作文件比较明显一些

a.json最终还是可以找得到的,也可以对齐进行修改

本文源码是HBuilder X写的

https://download.csdn.net/download/u012563853/88790625

来源:

uniapp中配置开发环境和生产环境-CSDN博客

相关推荐
涔溪38 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿2 小时前
uni-app请求方法封装⑦
uni-app