vuenginx（vuenginx反向代理配置）

本篇文章给大家谈谈vuenginx，以及vuenginx反向代理配置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue加载nginx内存狂涨不加载
• 2、vue项目部署必须用nginx吗
• 3、vue项目nginx必备配置-----API 接口代理
• 4、Vue多页面应用与Nginx
• 5、vue部署到nginx
• 6、nginx同时部署多个vue项目后请求刷新一直转圈

vue加载nginx内存狂涨不加载

zoukankan html css js c++ java

nginx配置解决vue单页面打包文件大，首次加载慢的问题

cnpm run build 文件过大，其中主要是vender.js有1.5M，代码部署到服务器，首次访问加载页面时比较慢，耗时6.5s左右，所以需要优化下。

1、Nginx开启gzip

找到nginx.config。关于gzip压缩灶清代码：

http {

gzip on; #开启或关闭gzip on off

gzip_disable "msie6"; #不使用gzip IE6

gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）

gzip_buffers 4 16k; #buffer 不用修改

gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长

gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型

gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"

}

配置完重启Nginx

识别gzip与非gzip请求

gzip请求：

非gzip请求：

gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。

而上面通过接收数据与实际数据拿正大小相比也能明显看出差异

2、webpack gzip

vue项目中config/index.js

productionGzip: true, //是否开启gizp压缩

productionGzipExtensions: ['js', 'css'],

开启后cnpm run build会生成*.gz文件。

上传到服务器，测试查看接受文件大小。发现接收依然是1.5M的，而不是469K的，

莫非，webpack打包gzip文件毫无卵用？

3、gzip_static 静态压缩

经过一番百度，得一宝贝，gzip_static。什么东东呢？字面上意思就是：gzip静态。

卖个关子：上面配置了，Nginx是可以开启gzip压缩，而且能够实现压缩效果。而它是如何工作的呢？

客户端发起请求

-》Nginx接收请求

-》Nginx加载文件进行gzip打包压缩成*.gz

-》返回给浏览器

-》浏览器解压*.gz （应该是它干的，反正看不见）

　 也就是说，每次请求，Nginx都会进行压缩返回、压缩返回、压缩返回、 将会导致浪费大量CPU。

　 这么个大bug是谁设计的？如果请求量大，CPU会不会挂掉？//猜测

　 当然，并不会，gizp打包压缩后会临时缓存，

　 所以，能不消耗CPU就不消耗CPU。

　 废话太多，步入正题。放大招！！

http {

gzip on; #开启或关闭gzip on off

gzip_static on;#是否开启gzip静态资源

gzip_disable "msie6"; #不使用gzip IE6

gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）

gzip_buffers 4 16k; #buffer 不用修改

gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长

gzip_types text/隐敏前plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型

gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"

}

重启nginx，访问服务器效果：变成459K了，耗时也少了不少

所以开启gzip_static后。流程就会变成

//偷懒写法

if(*.gz){

return *.gz //懒得压缩直接扔文件

}else{

return gzip() //压缩再扔给浏览器

}

nginx的gzip压缩力度从1-9 。如果开启过大，CPU会严重浪费，而webpack压缩gzip默认是9。因此，打包压缩gzip静态资源是很有必要的。

补充一点：Gzip文件压缩，如果不安装那个插件，build是会报错的，详细如下：

Gzip 文件压缩

顺带分享一个很6的优化打包的方法，用起来也简单的很，只要下载一个插件，然后打开一个设置就好了。

设置方法：

这里其实是webpack自带的一个优化打包的方法，在打包的时候，每个js和css文件会压缩一个gz后缀的文件夹，浏览器如果支持g-zip，会自动查找有没有gz文件，找到了就加载gz，然后本地解压执行。

打开这个配置会之后对整体的打包体积也就是dist文件夹并没有太大的变化。下图来看看他的压缩率以及对加载的提升，可以说是非常大且明显的，大家可以自己试一下就知道多好用了。

相关阅读:

Linux磁盘分区MBR分区

win10 1809磁盘占用总是100%

LINUX系统的7种运行级别

【工作环境】公司主域控硬盘损坏后的维修步骤

程序员的一些人生感悟

dispatch_get_main_queue 的同步异步问题

虚拟机VirtualBox中Ubuntu无法全屏解决方法

十大报错、报异常、跑不起来原因

关于scrollbarfacecolor只支持ie的解决方法

一个严肃的面试经验

原文地址：

最新文章

vue 中$index $key 已经移除了

Sublime Text3自动保存的功能(失去焦点自动保存)

创建git密钥的时候提示 too many arguments

pc端有弹出层 并有滚动的时候遇到的问题以及解决

WAMP 403 Forbidden禁止访问,别的电脑访问不了；

遇到一张jpg的图片打不开,ps打不开,fireworks,打不开,ie8浏览器上显示不了,其他的浏览器没问题

实例构造器和类（引用类型）

静态工厂、工厂方法、抽象工厂

常量和字段

BADIs 概览

热门文章

BADIs 实现小例

BADIs 查找

BADIs 实现原理

BADIs Filter Dependent/Multiple Use

CentOS7 搭建AmbariServer，安装Hadoop集群（一）

Centos 7部署大众点评CAT（一）——单服务器部署

linux内存随笔

sudo日志审计

man帮助命令

MBR和GPT分区学习

Copyright © 2011-2022 走看看

[img]

vue项目部署必须用nginx吗

vue项目部署必蠢宴须用nginx。

vue项目部署使用的是webpack提供的proxyTable做的代带戚银理从而解决了开发环境的跨域请求仔弊问题，需要使用Nginx做反向代理，因此vue项目部署必须用nginx。

vue是一个构建数据驱动的web界面的渐进式框架。

vue项目nginx必备配置-----API 接口代理

API 接口代理

我们一般做vue的项目都会配置接口代理，比如以 /API 径开头的请求都代理到本机肆滑的3000端口

那么问题来了这里的配置只有在本机没打包的时候才有效的裂闭腊，打包之后/API 径开头的请求态喊就不会代理了，上传到服务器后

如何解决呢？

办法来了！！！

我的后台服务是node的，也部署在同一个服务器，开启的是3000端口

看如下nginx配置

好了看上面配置后面的注释吧，就这样配置绝逼没问题

Vue多页面应用与Nginx

npm run build 之后将 dist 放到Nginx目录就行?

再多几个需求就不简单了:

一步一步来

假如 我们项目有两个入口: pc 与 mobile, 我们需要修改 这几个地方:

按照vue-cli的 官方文档 配置多入口并不难:

页面入口名字 即 mobile 只会影响在开发环境的入口: 现在需要使用 'localhost:3000/index' 和或者 'localhost:3000' 来进入 index 页面, 使答陪用 'localhost:3000/mobile' 来进入 mobile 页面.

filename 会影响在生产环境中打包出来的入口文件(.html文件)路径. 值得注意的是 mobile . filename 字段: 我设置的是 mobile/index.html , 而不是 mobile.html , 这是有原因的, 在下面配置nginx时会说到.

配置好vue.config.js之后打开 'localhost:3000/mobile' 却发现空白, 进入不了mobile的路由.

查文档 VueRouterApi-base , 发现需要配置 base.

官方文档只是举了一个例子说部署在/app/下可以设置base, 但多页面也需要如此配置.

如下:

mobile.router.js

现在访问 localhost:3000/mobile 就能正常进入.

至此, 开发环境没问题了. 接下来是部署.

我使用nginx作为web容器部署前端项目, 其他服务器大同小异.

我们需要将 npm run build 打包出来的 dist 文件夹下的所有文件放置到nginx所在服务器的 /usr/share/nginx/html 目录下. (目录可以自定义)

nginx.conf

其中为了支持VueRouter的History模式, 我们需要按照官方文档配置: HTML5 History 模式 .

又得益于我们将 mobile 入口的输出文件地址修改为了 mobile/index.html , 正好访问 /mobile/ 时让Nginx打开 mobile/index.html 文件, 所以它足够简单.

如果你只有需求将项目部署在根目录, 那么现在便完成了.

假如需要将项目放入 下, 访问 进入index入口, 访问 进入mobile入口. 则在上述 ‘部署到根目录’ 基础之上还需要修改以下几项文清滑蠢件:

pages 中需要修改的是 两个入口名字, 修改为: app/index 与 app/mobile .

在上面说了, 页面入口名字 即 app/mobile 只会影响到开发环境访问入口: 现在在开发让宽环境访问 localhost/app/mobile 才能进入 mobile 页面.

如果我们需要在生产模式也使用 domain/app/mobile 路径访问项目, 还需要修改: publicPath 和 outputDir

修改base, 如下:

mobile.router.js

A: 修改outputDir是为了不修改nginx配置. 不修改outputDir也是可行的, 那么需要修改nginx配置如下:

少改一个文件是一个, 所以我推荐修改 outputDir .

vue部署到nginx

1、安装nginx

2、到nginx的安装目录下使用 start nginx 启动nginx服务

3、nginx的主配置文件在 /conf/nginx.conf

4、修改vue项目里的 vue.config.js 的配置文件

5、打包部署文件 npm

6、将打包部署后的文件放在nginx/html目录下

7、修改nginx的配蔽厅置文件

8、测试配置文件 nginx -t

9、重启，载入新的配置文件 nginx -s reload

10、宏灶隐此时打开localhost/testWeb就能看到页面了辩逗

nginx同时部署多个vue项目后请求刷新一直转圈

在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于nginx的缓存配置问题引起的。

首先，你可以查看nginx的配置文件（默认是nginx.conf文件），确认是否开启了缓存功能。如果开启了缓存，那么在请求刷新时，可能会因为缓存未过期而一直等待下去，导致页面一直转圈。此时，你可以尝试关闭nginx缓存，或调整缓存时间巧弊，让其能够及时更新缓存内容。

其次，你也可以检查vue项目的路由配置和nginx的代理配置是否正确。如果代理配置有误，那么可能会导致请求无法正常转发，从而导致页面无法加载。在这种情况下，你可以根据具体的错误提示来排查问题，例如查看nginx的日志文件和浏览器的控制台输出等。

最后，如果以上方法都无法解决问题，你可以尝试进行网络诊断。例如使用ping命令测试服务器的连通性、纤宽孝使用traceroute命令追踪网络路径、检查服务器的负载等等。通过这些方法，你可以找到潜在的网络问题，并采取相应的措施来解决问题。

综上所述，请求刷新一直转圈是一个比较常见的问题，在排查时需毁稿要注意nginx的缓存配置、vue项目的路由配置和nginx的代理配置等问题。通过逐一排查，可以最终找到问题所在，并解决掉该问题。

关于vuenginx和vuenginx反向代理配置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。