Vue项目的打包和发布

npm run build

进入项目目录的控制台,输入npm run build,进行打包,就可以看到原本的文件目录中出现了一个dist的打包文件夹,这里面就是打包好后的文件了

在这里插入图片描述

使用静态服务器工具包发布打包的vue项目

  1. npm install -g serve
    安装serve组件
  2. serve dist

在这里插入图片描述
发布成功

使用动态 web 服务器(tomcat)发布打包的vue项目

1、修改配置: webpack.prod.conf.js文件,如下图:

在这里插入图片描述
目的是将打包后的文件夹进行自主命名,原来的dist就会变成你自定义的名称,然后进行重新打包,也就是npm run build
然后将新出现的打包文件夹整体放到Tomcat的webapp目录下

在这里插入图片描述
http://localhost:8080/xxx(本例中xxx为dist,没有做额外修改)

### Vue 项目打包发布指南 #### 准备工作 为了顺利进行Vue项目打包发布,需确认已安装Node.js以及npm或yarn。确保本地环境满足这些条件之后,在Vue项目的根目录下操作。 #### 执行打包命令 在终端或者命令提示符窗口中输入`npm run build`来触发构建过程[^1]。此命令会依据配置自动编译源码并优化资源,最终生成用于生产的静态文件,默认情况下位于dist文件夹内。 #### 修改打包路径及路由模式设置 对于希望自定义输出位置或是调整应用URL结构的情况,则要编辑`vue.config.js`文件。比如当计划把应用程序放置于服务器上的子目录而非顶级域名时;又或者是切换历史记录API(History Mode)代替默认的哈希(Hash)方式处理客户端导航链接。这一步骤涉及到修改publicPath属性以及其他相关参数以适应实际部署场景的需求[^3]。 #### 查看打包结果分析报告 如果想要获取关于所创建包体积的信息,可以借助webpack-bundle-analyzer插件或者其他类似工具。运行特定指令后能够直观看到各个模块占用空间比例图表,有助于识别潜在性能瓶颈点并采取相应措施加以改进[^4]。 #### 实现按需加载功能 考虑到提升首屏渲染速度的重要性,建议采用异步组件配合动态import语法实现懒加载效果。这样只有当用户真正访问对应页面的时候才会去请求必要的JavaScript代码片段,从而减少初次加载时间开销。同时也可以针对不同路由设定各自的懒载入策略,进一步增强用户体验质量[^5]。 ```javascript // 使用async/await简化逻辑表达 const LazyComponent = () => import(/* webpackChunkName: "lazy-component" */ './LazyComponent.vue'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值