在实际项目开发过程中,可能开发环境和生产(测试)环境不一样,经常需要修改配置常量,才能满足对应的环境,才能使软件运行起来 。在vue3中可以使用2个文件进行区分 。
.env.:开发环境
.env.:生产(测试)环境
1.首先使用 X建立一个VUE3项目,并且能跑起来
2.分别建立2个文件,必须以VITE_开头,否则无法识别,如图所示
3.然后在使用的地方加上如下命令
import.meta.env.VITE_TEST
4.重新启动服务器,一定要重新启动服务器,否则无效
打开浏览器,我们可以看到输出了开发环境 。
5.选择build,生成生产模式,程序就在dist中
6.此时,我这里使用nginx进行发布,当然你也可以使用别的发布网址,比如IIS等等 。
nginx的配置,之前文档已经介绍了,这里不再说明 。
中使用nginx部署网站_故里2130的博客-CSDN博客部署网站
部署完成后,直接打开,我这里是808端口 。
打开浏览器,我们可以看到输出了生产环境 。
拓展:
文章插图
打包后,自定义IP地址 。
1.打包前,在项目的根目录中,创建.js
const CONF={baseUrl1:'http://127.0.0.1:8888'}
2.在index.html中调用
3. 然后在axios中调用
4.打包后,之前的.js就没有了,复制所有的打包文件 。
【VUE3中,使用.env.development和.env.production】5.创建.js,把之前写的再写一次
6.把index.html中的路径修改一下
- 伪满总理秘书官眼中的张景惠:清闲到抄经书度日
- 薄姬:大汉朝史上一个命中注定要生天子的奇女子
- 作为中国历史上有名的汉奸:李陵却倍受同情
- 使用Md5进行字符串加密
- 算法中常用数学知识
- 神仙武力排行榜,中国神仙的武力排行
- 范进中举到底有多难?一人中举全家升天
- 后宫绝色宫女们的真实生活:真的老死宫中吗
- 寺庙中主事者是住持还是方丈?西游记弄错了!
- 养中华鲟吃什么食物?