vue项目如何部署实践篇

游客2025-05-16 12:55:01

使用vue、react、angular等技术开发过程中，我们都会遇到以下问题：

这两个问题可以从很多方面进行优化，今天我就从前端页面部署阶段来优化一下这两个问题。PS：以下内容都基于vue-cli3+。

前端页面文件缓存方案

路由使用按需加载后，打包生成的文件，每一个路由页面都对应一个js和css文件，入口main.js及其依赖则打包成了app.js和app.css，公共依赖都放到了chunk-vendors.js。

vue-cli3打包后的dist/js文件夹：

在 Nginx 的目录下使用 cmd 命令行，启动命令：start nginx，关闭命令：nginx -s stop

备注：修改配置文件需要重载配置：nginx -s reload。启动之后，打开http://localhost:80就能看的效果

页面文件合理的设置缓存和gzip压缩是实实在在能提升用户体验的操作，而且比少写几个循环、删除几行代码优化强得多，但是需要前端和运维的密切配合，才能实现最佳方案。

service worker是用来实现离线应用的，文章中没有详细赘述。vue-cli4生成的模板自带service worker，或许这才是vue项目缓存的最佳实践？

最后，Nginx并不是很熟悉，有什么问题和错误，欢迎指出！

文章转载自：公众号【前端 Q】

标签：Angular

本文是由用户"游客"发布，所有内容的版权归原作者所有。没有经过书面许可，任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。