vue-打包后的dist文件如何在本地测试

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量401 收藏 2
点赞数 1
分类专栏： vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gik99/article/details/134956752
版权

vue-打包后的dist文件如何在本地测试

  • 1.执行打包命令 npm run bulid后,生成dist文件夹
  • 2.全局安装http-server
npm install http-server -g
  • 3.dist文件夹下 打开终端 开启服务
http-server -p 8888   //8888未指定端口号
Gik99
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue-cli配置打包文件本地使用的教程图解
10-18
主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue-cli打包后如何本地查看的操作
10-14
主要介绍了Vue-cli打包后如何本地查看的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-cli打包后如何本地查看
qq_36098938的博客
09-20 2273
Vue-cli打包后如何本地查看 Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行。 可以在本地启动一个http-server服务查看，操作步骤如下： 全局安装http-server：npm install -g http-server 进入dist根目录下cd dist 再输入指令：serve 输出serve: Running on port 5000,即服...
如何本地打开vue3+vite+ts项目打包的dist文件夹下index.html进行把玩
洋茄子炒鸡蛋的博客
08-10 5256
最近做一个vue3+vite3+ts的项目，配置了多入口页面，想不通过部署到服务器的方式在本地看一下打包后的效果。
Vue项目的打包方式（生成dist文件）(1)，2024年最新华为od面试经历
m0_74931199的博客
04-18 498
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！)]一个人可以走的很快，但一群人才能走的更远！
如何快速在本地运行你vue打包的的dist文件
cypking的博客
07-26 1687
要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache,Nginx，phpstudy。这里以使用Node.js的http-server为例进行说明 首先，确保已经安装了Node.js。如果没有安装，可以从官网下载并安装。 打开终端或命令行窗口，使用以下命令安装http-server npm install -g http-server 进入dist...
vue项目打包成app后如何进行调试
weixin_44750227的博客
08-02 393
点击vconsole就和控制台一样了可以看大输出的内容和network请求了。需求:vue写的H5项目打包成android的apk后需要进行调试。实现:在public下的index.html文件中添加以下代码。安装apk后会出现在页面中。
创建微服务测试vue打包文件，服务器上部署打包的页面
qq_57676486的博客
04-10 263
创建文档demo --- npm init --- 文档命名： vue_test_server --- 一路enter --- npm i express。也可以用自己的，反正vue打包dist文档里面的内容复制出来，往static文档里粘贴就行了，2.关闭服务器（终端输入Ctrl+c）；2.server.js里面写如下代码，一个微型服务器创建成功。1.创建文档命名为static，写一个静态测试页面。2.终端启动服务器，再浏览器输入。出现如下页面，服务器访问数据成功。2.终端输入：npm init。
前端自测运行vue打包后的dist文件
m0_68716504的博客
07-19 2289
在中，dist目录是代码打包之后生成的文件夹，其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件，可以使用简单的静态服务器来启动。
vue环境变量配置打包（本地、测试、生产）
weixin_47822796的博客
11-08 505
vue根据不同环境配置打包环境
本地运行Vue项目打包后的dist文件
weixin_44658916的博客
03-16 867
1.安装express-generator生成器 执行 npm install express-generator -g 进行安装 2.创建一个express项目 执行 express demo（demo是项目名） demo项目目录如下图 3.进入demo目录，安装项目依赖 npm install 4.把dist目录下所有的文件复制到express项目的public文件夹下 运行npm start 启动项目 打开浏览器，输入 http://localhost:3000 , 就可以看到效果了 ...
vue打包后dist文件在本地启动运行
qq_38902432的博客
04-04 4691
vue项目开发好后，想在本地运行测试最后的打包文件可以通过http-server来启动。最后在浏览器输入：127.0.0.1:9007就可以查看了。
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element-admin-tinymce本地化文件
06-04
vue-element-admin-tinymce源码，下载到本地，适当配置后，直接嵌入，不再使用cdn
vue-cli 项目打包完成后运行文件路径报错问题
10-16
主要介绍了vue-cli 项目打包完成后运行文件路径报错问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1195
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 507
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 330
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
vue打包后怎么运行
11-03
使用Vue进行开发的项目，一般需要将其打包成最终可执行的静态文件，然后运行在服务器或者本地环境中。下面是一个简要的步骤来说明如何运行打包后的Vue项目： 1. 运行打包命令： 使用命令行工具进入项目根目录，并执行打包命令。常用的打包命令有： ``` npm run build ``` 或者 ``` yarn build ``` 这将根据项目中的配置文件（如webpack配置文件）将Vue项目打包成最终的静态文件。 2. 查看打包结果： 打包完成后，会在项目根目录生成一个`dist`（或者根据配置文件中的输出路径而定）文件夹，其中包含了所有打包的静态文件。可以使用文件管理器查看该文件夹中的内容。 3. 将打包结果部署到服务器或者本地环境： 将打包后的静态文件部署到服务器上或者在本地环境中打开。方法有很多种，以下列举常见方式： - 在服务器上部署： 将打包后的静态文件上传到服务器的指定目录中。通过配置服务器软件（如Nginx、Apache等），使得该目录能够被访问到。然后在浏览器中输入服务器地址和文件路径，即可访问到Vue项目。 - 在本地环境中打开： 可以使用任意一个本地服务器软件（如http-server、live-server等），将打包后的静态文件作为服务器的根目录，然后在浏览器中输入本地服务器的地址即可访问到Vue项目。 4. 运行Vue项目： 在浏览器中输入服务器地址（或者本地服务器地址），即可访问到Vue项目的打包结果。可以进行交互、浏览和测试等操作。 总结来说，将Vue项目打包后，需要将静态文件部署到服务器或者本地服务器环境中，通过访问服务器地址即可运行打包后的Vue项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gik99

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值