针对Vue-cli Gizp 需要了解的事情(vue3.0以下版本不包含3.0):

1、找到对应文件 webpack.prod.conf.js;

clipboard.png

2、针对源文件(个人不建议删除);

clipboard.png

3、打开Gzip压缩功能

eg: productionGzip: true 

clipboard.png

4、执行项目压缩功能(默认是 npm run build ),执行完成过后效果如下:

clipboard.png

5、前端的项目已经准备好。接下来是nginx配置项:

​(1).打开nginx 配置文件 nginx.conf

clipboard.png

(2). 开启gzip压缩功能(注意:gzip_static on; 这行命令如果没有 需要加上 )

clipboard.png

(3)执行保存命令(wq!)

(4)重启nginx

1、先执行nginx测试

 (nginx 路径) -t   根据自己安装目录执行
 lnmp 默认路径 :  /usr/local/nginx/sbin/nginx -t

clipboard.png

2、 执行重启命令 :

(nginx 路径) -s reload    根据自己安装目录执行



clipboard.png

6、接下来就去浏览器访问你们文件就可以看到 (页面没有报错正常执行并且控制台如下):

clipboard.png


CoolLsk
119 声望11 粉丝

座右铭是树袋熊