vue3+vite——打测试包+正式包+本地预览打包后的文件——基础积累

最近在学习vue3+vite的内容,发现vitewebpack类似,下面将区别及使用方法做一下记录:

1.vite添加环境配置文件

...
├── src
...
├── .env                                      # 通用环境变量配置
├── .env.development                          # 开发环境变量配置
├── .env.test                                 # 测试环境变量配置
├── .env.prod                                 # 生产环境变量配置
...

我这边的配置文件有以下几个:
在这里插入图片描述
每个文件中的内容基本上都是一致的,比较重要的是以下几个:

VITE_BASE_URL=接口地址
VITE_BASE_LOGIN=获取登录token的接口,一般与其他的接口地址会有所不同
VITE_PERMISSIONS_KEY=admin.permissions
VITE_USER_KEY=admin.user
NODE_ENV=development

.env文件是通用的配置文件,如果在对应的环境文件中没有找到对应的参数,则会主动去.env文件中去查找。

2.package.json中的内容:

  "scripts": {"serve": "vite","api": "node service/index.js","build": "vue-tsc --noEmit && vite build","build:test": "vue-tsc --noEmit && vite build --mode test",}

本地运行:npm run serve
打测试包:npm run build:test
打正式包:npm run build

3.打包后的文件

在这里插入图片描述
此时如果直接点击index.html文件:
在这里插入图片描述
此时需要通过开启本地服务才能正确的预览文件

4.方法一:通过http-server运行

安装http-server

npm i -g http-server

启动HTTP服务
dist目录下打开命令行工具 (cmd) 执行命令:

http-server

如果你此时终端默认的地址是在dist外层,则此时可以指定运行的文件夹

http-server dist

此时默认的端口号是8080
如果需要指定端口号,则需要使用下面的命令:

http-server -p 4200 dist

此时终端会显示下面的内容,则表示运行成功。
在这里插入图片描述
此时在浏览器中打开http://localhost:4200即可,因为127.0.0.1localhost

5.方法二:通过express运行

首先需要在dist目录下安装 express 依赖,

npm i express

然后,在dist文件夹中新建一个server.js的文件,内容如下:

import express from 'express';
var app = express();
const hostname = 'localhost'; // 这里填写要访问资源的机器IP地址,例如192.168.2.101
const port = 4200;
app.use(express.static('./'));
app.listen(port, hostname, () => {console.log(`Server is running, biu biu biu`);
});

然后打开dist目录的命令行工具执行 node server 命令,即可以在浏览器中访问页面了。

比如上面的代码,则需要在浏览器中打开http://localhost:4200即可。

运行后的界面如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/14030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件操作fread()

fread 是 C 语言中用于从文件中读取数据的函数。它可以读取指定数量的数据项到内存中。c size_t fread(void *ptr, size_t size, size_t count, FILE *stream);ptr:指向接收数据的内存块的指针。size:每个数据项的字节数。count:要读取的数据…

Gitee创建分支

在使用Gitee进行代码托管时,分支是一个非常重要的概念。它可以让我们在不同的开发阶段、不同的团队成员之间协作开发,提高团队工作效率。因此,下面将介绍如何在Gitee仓库中建立分支。 一、在Gitee上创建新的分支 在讲解如何在Gitee上创建新…

快问快答JS面向对象面试题

1、说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用…

机器学习:提取问题答案

模型BERT 任务:提取问题和答案 问题的起始位置和结束位置。 数据集 数据集 DRCDODSQA 先分词,然后tokenize 文章长度是不同的,bert的token的长度有限制,一般是512, self-attention的计算量是 O ( n 2 ) O(n^2) O(n…

opencv+ffmpeg环境(ubuntu)搭建全面详解

一.先讲讲opencv和ffmpeg之间的关系 1.1它们之间的联系 我们知道opencv主要是用来做图像处理的,但也包含视频解码的功能,而在视频解码部分的功能opencv是使用了ffmpeg。所以它们都是可以处理图像和视频的编解码,我个人感觉两个的侧重点不一…

无涯教程-jQuery - Selectable选择函数

选择能力功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用选择能力功能。用光标绘制一个框以选择项目。按住Ctrl键可进行多个不相邻的选择。 Select able - 语法 $( "#selectable" ).selectable(); Select able - 示例 以下是一个简单的示例&…

目标检测应用场景—数据集【NO.14】行人跌倒测试

写在前面:数据集对应应用场景,不同的应用场景有不同的检测难点以及对应改进方法,本系列整理汇总领域内的数据集,方便大家下载数据集,若无法下载可关注后私信领取。关注免费领取整理好的数据集资料!今天分享…

Android10 Settings系列(三)根据需求动态添加删除一级菜单、二级菜单的设置项

一 、背景 当时遇到定制需求,需要根据实际需要隐藏Settings的菜单项,于是开始了寻找方法 二 、准备工作 在看了一下源码,经过尝试后,确认生效后,就简单说明一下Settings中布局中主要组成元素 Settings中的菜单项是由 PreferenceScreen 和Preference组成的。其中Prefer…

shardingsphere读写分离配置

注: 如果是升级之前的单库单表,要将之前的 数据库接池 druid-spring-boot-starter 注释掉,换成 druid,否则无法连接数据库。 原因: 因为数据连接池的starter(比如druid)可能会先加载并且其创…

DevOps(三)

CD(二) 1. 整体流程2. 环境准备1. jenkins安装2. 编译安装git3. docker安装4. docker-compose安装5. sonarqube安装6. harbor安装7. gitlab私服8. maven安装9. Nexus部署10. K8s部署3. 安装java及编写代码3.1 安装java3.2 安装IntelliJ IDEA3.3 安装tomcat3.4 安装maven3.5 c…

【LLM】大语言模型学习之LLAMA 2:Open Foundation and Fine-Tuned Chat Model

大语言模型学习之LLAMA 2:Open Foundation and Fine-Tuned Chat Model 快速了解预训练预训练模型评估微调有监督微调(SFT)人类反馈的强化学习(RLHF)RLHF结果局限性安全性预训练的安全性安全微调上手就干使用登记代码下载获取模型转换模型搭建Text-Generation-WebUI分发模型…

微信小程序-处理ios无法播放语音的问题

背景 框架:tarovue3 问题:今天搞小程序语音播放功能,开放工具播放正常,但是到ios手机上调试时无法播放,在网上找到个好办法 解决方案 核心代码 Taro.setInnerAudioOption({obeyMuteSwitch: false // 解决有一些IOS无…

UE5、CesiumForUnreal加载无高度地形

文章目录 1.实现目标2.实现过程3.参考资料1.实现目标 在UE5中,CesiumForUnreal插件默认的地形都是带高度的,这里加载没有高度的地形,即大地高程为0,GIF动图如下: 2.实现过程 参考官方的教程,下载无高度的DEM,再切片加载到UE中。 (1)下载无高度地形DEM0。 在官方帖子…

uniapp使用uni-swipe-action后右侧多了小于1px的间隙

问题&#xff1a;uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题&#xff0c;但是在微信开发者工具中有问题。 代码如下&#xff1a;在滑动滑块或者点击这个区域时&#xff0c;就会出现问题。 <scroll-view :scroll-y"true" :style&quo…

如何理解原型及原型链?js的继承方式

原型与原型链 原型 在js中&#xff0c;每个对象都有一个原型&#xff08;prototype&#xff09;。原型是一个对象&#xff0c;其他对象可以通过原型来共享属性和方法。当我们创建一个对象时&#xff0c;它会自动关联到一个原型对象。 例如&#xff1a;function Person(name, a…

文心一言大数据模型-文心千帆大模型平台

官网&#xff1a; 文心千帆大模型平台 (baidu.com) 文心千帆大模型 (baidu.com) 模型优势 1、模型效果优&#xff1a;所需标注数据少&#xff0c;在各场景上的效果处于业界领先水平 2、生成能力强&#xff1a;拥有丰富的AI内容生成&#xff08;AIGC&#xff09;能力 3、应用…

区间dp,合并石子模板题

设有 N 堆石子排成一排&#xff0c;其编号为 1,2,3,…,N。 每堆石子有一定的质量&#xff0c;可以用一个整数来描述&#xff0c;现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆&#xff0c;合并的代价为这两堆石子的质量之和&#xff0c;合并后与这两堆石子相邻的…

【笔试强训选择题】Day32.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01; 文章目录 前言 一、Da…

HDFS异构存储详解

异构存储 HDFS异构存储类型什么是异构存储异构存储类型如何让HDFS知道集群中的数据存储目录是那种类型存储介质 块存储选择策略选择策略说明选择策略的命令 案例&#xff1a;冷热温数据异构存储对应步骤 HDFS内存存储策略支持-- LAZY PERSIST介绍执行使用 HDFS异构存储类型 冷…

回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实…