当前位置: 首页 > news >正文

vue打包后的dist文件如何启动测试

vue项目进行webpack打包操作 npm run build 后,会生成dist静态文件夹,这个文件是不能直接运行的,如果我们想要进行测试的话,一般是有两种方式

nginx静态代理

首先可以通过nginx做静态资源映射,首先修改nginx的配置 nginx.conf

server {listen       9527;server_name  localhost;	add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods *;add_header Access-Control-Allow-Headers *;if ($request_method = 'OPTIONS') {return 204;}location / {root   D:\mogu_blog\data\vue_mogu_web\dist;index  index.html index.htm;}
}

然后添加录下内容,最后把的文件夹放在如下目录

D:\data\dist

最后启动nginx,然后访问如下ip地址

http://localhost:9527

即可看到我们的页面

server方式启动

同时npm还提供了 serve 命令,来进行测试,这种方式比nginx更加方便,可以直接进行测试,但是存在的问题就是,没有办法指定端口号,而只能开启 5000端口

# 安装 serve模块
npm install -g serve
# 启动
serve -s dist

启动后,访问如下地址

http://localhost:5000

相关文章:

  • 苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览
  • 2024年软考——信息系统监理师30天冲刺学习指南!!!
  • 2024年自动化、电气控制系统与设备国际学术会议(AECSE 2024)
  • 半导体制造过程中设备通信的高级概述
  • 无人机飞手入伍当兵技术优势分析
  • 【达梦数据库】临时表的使用测试
  • 使用Plotly绘制交互式图表:从入门到精通
  • LabVIEW界面输入值设为默认值
  • 【Python报错已解决】AttributeError: ‘tuple‘ object has no attribute ‘log_softmax‘
  • Voxel mamba :基于Mamba的3D目标检测算法解析
  • vue2+elementUI实现handleSelectionChange批量删除-前后端
  • 基于物联网技术的智能运动检测仪设计(微信小程序)(230)
  • 数据链路层之以太网
  • windows通过文件系统访问ftp传输中文乱码
  • VMware ESXi 8.0U3b macOS Unlocker OEM BIOS 2.7 标准版和厂商定制版
  • 【译】JS基础算法脚本:字符串结尾
  • 【刷算法】求1+2+3+...+n
  • avalon2.2的VM生成过程
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • es6(二):字符串的扩展
  • Java反射-动态类加载和重新加载
  • JSONP原理
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • node入门
  • php的插入排序,通过双层for循环
  • quasar-framework cnodejs社区
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 对象引论
  • 服务器从安装到部署全过程(二)
  • 构建二叉树进行数值数组的去重及优化
  • 类orAPI - 收藏集 - 掘金
  • 前嗅ForeSpider采集配置界面介绍
  • 微服务入门【系列视频课程】
  • 异常机制详解
  • 在 Chrome DevTools 中调试 JavaScript 入门
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​Benvista PhotoZoom Pro 9.0.4新功能介绍
  • ​iOS安全加固方法及实现
  • #NOIP 2014# day.2 T2 寻找道路
  • ${ }的特别功能
  • (23)Linux的软硬连接
  • (70min)字节暑假实习二面(已挂)
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (js)循环条件满足时终止循环
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (初研) Sentence-embedding fine-tune notebook
  • (二) 初入MySQL 【数据库管理】
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (强烈推荐)移动端音视频从零到上手(上)
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • (转)Windows2003安全设置/维护
  • ***微信公众号支付+微信H5支付+微信扫码支付+小程序支付+APP微信支付解决方案总结...
  • .L0CK3D来袭:如何保护您的数据免受致命攻击