本文详细介绍了Vue前端项目的打包过程，包括执行打包命令、配置vue.config.js以适应不同部署场景，以及如何进行打包优化，如路由懒加载，以提高用户体验。通过`yarn build`命令生成的dist文件夹包含了上线所需的所有文件，需将其部署到服务器根目录或配置publicPath以适应子目录部署。
前端项目是在本地的IDE开发的。流程是：开发=》打包=》上线到生产环境=》使用。
vue脚手架只是开发过程中,协助开发的工具,当真正开发完了，脚手架不参与上线。
这时候要用到打包了。
打包后,可以生成,浏览器能够直接运行的网页=>就是需要上线的源码!
打包的作用:
①将多个文件压缩合并成一个文件。②语法降级。
③ less sass ts语法解析
....
打包的命令和配置说明:vue脚手架工具已经提供了打包命令，直接使用即可。
命令:
yarn build
结果:在项目的根目录会自动创建一个文件夹dist，dist中的文件就是打包后的文件,只需要放到服务器中即可。
配置:默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置 publicpath配成相对路径。
打包步骤：
在终端命令行执行命令，按回车
yarn build
如上图，所有的代码都转换为了dist文件夹。
需要注意的是，如果我们在本地点击index.html，弹出来页面是空白，我们看不到
3377
1万+
7373
2106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
