项目完成后的打包流程(超级详细)

10 篇文章 0 订阅
6 篇文章 0 订阅

* 打包:
  * 将多个文件压缩合并成一个文件
  * 语法降级
  * less sass ts 语法解析, 解析成css
  * ....

* 打包后,可以生成,浏览器能够直接运行的网页 => 就是需要上线的源码!

最简单的打包流程:

首先我们项目完成后当然是需要add,commit

然后最重要的一步就是设置配置路径,在vue.config.js里面设置publicPath:'./'

下一步我们可以做一个小优化:路由懒加载,去提高页面的加载性能,就是当用户第一次进入这个路由页面才会加载

const Detail = () => import('@/views/detail')
const Register = () => import('@/views/register')
const Login = () => import('@/views/login')
const Article = () => import('@/views/article')
const Collect = () => import('@/views/collect')
const Like = () => import('@/views/like')
const User = () => import('@/views/user')

最后使用 npm run build 生成dist文件

后面我们如果运维大哥需要的话,我们就可以直接发dist文件给他就好啦

实际开发中呢,我们是需要将dist文件部署到服务器上的

所以下一步,就是将我们配置中的.gittgnore中的dist文件注释掉

然后再add,commit 

最后呢,我们需要新建一个git仓库,注意要是空仓库哦

然后我们就按照仓库的提示去上传文件

最后刷新我们的仓库就可以看到了

最后的最后就是部署啦

点击服务的Gitee Pages

然后就是上传我们的指定的文件dist就可以啦

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack打包Vue项目详细流程主要包括以下步骤: 1. 创建项目:使用Vue官方提供的Vue CLI脚手架工具创建项目,该工具已经集成了Webpack等相关依赖。命令如下: ``` vue create my-project ``` 2. 配置Webpack:在项目根目录下创建vue.config.js文件,用于配置Webpack。可以在该文件中配置Webpack相关的内容,例如入口文件、打包输出目录、loader、插件等。 3. 解析入口文件:Webpack会根据配置文件中的entry选项,找到项目的入口文件。通常情况下,入口文件是src/main.js。 4. 加载模块:Webpack会根据入口文件及其依赖的模块,选择相应的loader对模块进行处理。对于Vue项目,需要使用vue-loader对.vue文件进行处理,并使用babel-loader对ES6语法进行转换。 5. 生成代码块:Webpack将处理后的模块组织成一个个代码块,使用CommonsChunkPlugin插件可以将公共代码块抽离出来,提高代码复用性和性能。 6. 输出文件:Webpack会根据配置文件中的output选项,将打包后的代码块输出到指定的目录。对于Vue项目,需要将打包后的文件输出到dist目录下。 7. 插件处理:Webpack还提供了许多插件,用于处理打包后的代码块。对于Vue项目,可以使用VueLoaderPlugin插件将.vue文件正确地编译为JavaScript代码。 8. 运行项目:使用npm run serve命令可以启动开发服务器,实时预览项目效果。使用npm run build命令可以打包项目,生成最终的静态文件。 以上就是Webpack打包Vue项目详细流程,通过这些步骤,可以快速地构建一个现代化的Vue项目

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值