在站点配置添加如下代码:

    location ~* \.(css|js)$ {
gzip_static on;
}

这是 nginx 的静态 gzip功能,会自动查找对应扩展名的文件,如果存在 gzip 文件,就使用,如果没有就用原文件

配合 vue-cli 的构建工具,开启 config/index.js 中的

productionGzip: true

Vue默认没有安装相应webpack 插件,需要手动安装一下:

npm install --save-dev compression-webpack-plugin

build 时会看到多打出很多 .gz 的包就ok啦~

refer: 论坛文章

nginx 开启静态 gzip 配合 Vue 构建的更多相关文章

  1. Nginx开启Gzip详解

    最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了Nginx的Gzip配置. 1. Ng ...

  2. nginx 开启gzip压缩

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,!  Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...

  3. Nginx开启gzip压缩功能

    在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...

  4. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  5. nginx 开启GZIP、域名指向index.html

    nginx 虽然默认开启了gzip压缩,但是有关压缩文件.压缩效率没有开启,在建设我的(个人博客)[www.fayinme.cn]中,直观的感受到gzip带来的访问速度提升的快感. 如何开启GZIP ...

  6. nginx开启gzip压缩后导致apk包下载不能正常安装

    最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...

  7. Nginx开启Gzip压缩提升页面加载速度

    1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...

  8. nginx开启gzip的方法

    nginx开启gzip的方法 1.vi打开Nginx配置文件 <pre>vi /usr/local/nginx/conf/nginx.conf</pre> 2.找到如下一段,进 ...

  9. 使用 Nginx 搭建静态资源 web 服务器

    在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Nginx 服务器来加载这些静态资源,这样就可以 ...

随机推荐

  1. mongoDB-Explain

    新版的MongoDB中的Explain已经变样了 Explain支持三种Mode queryPlanner Mode db.collection.explain() 默认mode是queryPlann ...

  2. nginx.conf配置文件详解

    一:nginx配置文件结构 nginx配置文件主要分为六个区域: main(全局设置).events(nginx工作模式).http(http设置). sever(主机设置).location(URL ...

  3. 【简单易用的傻瓜式图标设计工具】Logoist 3.1 for Mac

    [简介] Logoist 是一款Mac上强大易用的傻瓜式图标设计制作工具,通过使用内置模板和预设效果,您可以立即创建高质量的图形内容和艺术作品.通过使用该应用程序,可用于制作图标LOGO. 一款用于创 ...

  4. ETL过程

    ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词较常用在数 ...

  5. as依赖解决报错

    Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.android.suppor ...

  6. MySQL数据库优化_limit_2

    limit豫union一起使用时的优化 cp_order_exit数据行数:142951 cp_order_exit_led数据行数:20876 查询:这条 查询将会把 cp_order_exit中的 ...

  7. springboot入门使用

    一.什么是springboot,有什么用 springboot是一个开发框架,其出现的目的利用约定大于配置的思想来让开发者摆脱spring繁琐的配置,简化开发.其不是spring框架的替代品,是spr ...

  8. Mac下显示网页全屏快捷键

    control+command+F mac下谷歌浏览器全屏时隐藏头部:(隐藏标签页和地址栏) command+shift+B

  9. Hadoop记录-监控几个思路

    1.存活监控 基本监控,主要对进程的存活.端口连通性.url可检测性等指标进行监控. 2.2 可用性监控 主要指对用户而言是否可用,能否返回预期结果,通常部署在一些业务主流程或一些关键环节,如接口调用 ...

  10. source命令导入大数据速度慢优化

    XX市邮政微商城的项目数据库,300多M,约220万条数据,source命令导入花了20个小时左右,太不可思议. 速度慢原因:220多万条数据,就 insert into 了220多万次,下图: 这是 ...