Vue2项目架构搭建(九)—— 打包项目

本文介绍了一个基于Vue.js的项目的打包过程及部署方法。通过使用vue-cli提供的工具进行项目打包,并详细说明了如何验证打包后的项目是否能正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue开发的东西基础架构已经搭建完成,还有很多关联的插件,具体等以后用到再补充,最后就是项目打包。

打包代码

vue-cli已经配置好打包工具,只需要我们在当前项目下build就好,连续两次Ctrl + c 退出服务启动,执行

npm run bulid

下图显示完成打包和生成的文件目录:
这里写图片描述
打包完成后,项目目录会自动生成打包生成的dist文件夹,证明打包成功了。

检测打包代码

打包完成后会提示必须放在http server上才能运行,直接打开index.html不能工作,但是我们之前就已经有http server,而且打包的目录在当前项目下,只需把目录改到dist就行了。先跑服务:

npm run dev

修改浏览器链接,指向打包路径 http ://localhost:8080/dist/index.html,效果一模一样,直接把dist文件夹下内容扔到服务器就ok了。

本人才疏学浅,如果哪位小伙伴发现问题或者有更好的优化,希望能留言我好及时修改和优化,大家一起学习一起进步,免得被不合理或者错误的东西误导后续看到此博文的小伙伴。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值