Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. vendor.js 优化 由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!  1.1 第一步、cdn引入各种包  index.html中cdn的方式引入            
                
         
            
            
            
            location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|css|htm|html)$ { root /var/www/html/backoffice; ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-04-18 14:55:00
                            
                                2574阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            假设SpringBoot 的应用部署在 http://192.168.1.15:8093 上, nginx.conf配置文件里面增加如下配置location ~^/swagger/(.*){  proxy_redirect off;  # proxy_set_header Host $host;  proxy_set_header Host $host:$server_port; #添加...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-09-23 14:43:37
                            
                                3430阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            # Vue Redis配置页面
## 简介
Redis是一种基于内存的键值存储数据库,它提供了快速的读写性能和丰富的数据结构,被广泛应用于缓存、消息队列、排行榜等场景。在Vue项目中,我们可以通过配置Redis来存储和管理数据,本文将介绍如何在Vue项目中配置Redis,并展示一个简单的示例。
## 安装Redis
首先,我们需要在本地环境中安装Redis。可以通过以下步骤进行安装:
1            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-12-12 07:27:33
                            
                                62阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现访问单页面404问题,需要设置所有找不到的路径直接映射到index.html		root D:/nginx-0.8.55/html/dist/;		index  index.html index.htm;		        location / {			try_files $uri $uri @router;			index index.html;        }				location @router {            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-27 17:59:10
                            
                                1135阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            Nginx 简介Nginx 是一个免费、开源、高性能、轻量级的 HTTP 和反向代理服务器,也是一个电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强。Nginx 由内核和一系列模块组成,内核提供 Web 服务的基本功能,如启用网络协议,创建运行环境,接收和分配客户端请求,处理模块之间的交互。Nginx 的各种功能和操作都由模块来实现。Nginx 的模块从结构上分为:核心模块            
                
         
            
            
            
            第一步:使用vue-cli搭建项目(注:建议安装淘宝镜像,使用cnpm执行下面操作)         1.按住shift按钮,右键点击存放项目的文件夹,点击在此处打开命令窗口。        2.在命令窗口中输入 npm install -            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-01 09:33:07
                            
                                152阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            nginx配置nginx启动、停止、重新加载配置要启动nginx需要运行可执行文件,nginx通过 nginx - s   指令名  调用可执行文件。nginx -s stop  快速关机nginx -s quit    优雅关机nginx -s  reload  重新加载配置文件nginx -s  reopen  重新打开日志文件nginx配置文件的结构nginx由模块组成,这些模块由配置文件中            
                
         
            
            
            
            前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用。但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用。 Vue多页面应用开发 1. 新建 vue 项目 2. 安装 glob gl            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-11-03 16:02:00
                            
                                279阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')function resolve(dir) {  return path.join(__dirname, dir)}            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-03-14 09:24:48
                            
                                365阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            当前/home对应的页面,只有在登录的情况下才允许被访问,如果是未登录状态是不允许让你看到/home对应的页面的。现在sessionStorage中记录了一个token,证明我们已经处于登录的状态。如果把token清除掉,即处于未登录状态,此时再刷新页面,发现此时没有登录也能看到这个组件,这时就不满 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-10 17:49:00
                            
                                1196阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            访问页面:private static void viewPages() throws Exception{         Thread.sleep(500);         new Thread(new Runnable() {&nb            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                            精选
                                                        
                            2015-12-14 14:44:20
                            
                                288阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            # NGINX配置域名访问到指定页面
## 简介
在Kubernetes(K8S)中,我们可以使用NGINX作为Ingress Controller来实现将特定的域名映射到指定的服务,从而实现域名访问到指定页面的功能。
### 步骤概览
以下是配置域名访问到指定页面的步骤概览:
| 步骤 | 描述 |
|---|---|
| Step 1 | 部署NGINX Ingress Controll            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-05-23 10:36:08
                            
                                701阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一、需求PageHome登录页AppVersion移动端页想要部署的时候通过url可以跳转PageHome登录页面,并且改变url可以跳转App            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-07-10 10:21:26
                            
                                1087阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            前端
Vue是一款非常流行的JavaScript框架,它提供了一套高效、灵活、易于使用的前端开发工具。在实际开发中,我们通常会使用Vue来构建单页面应用(SPA),并将其部署到服务器上以便用户访问。本篇博客将介绍如何进行Vue单页面应用的部署配置。
构建生产版本
首先,我们需要将Vue应用程序构建为生产版本,这可以通过运行以下命令来完成:
npm run build
该命令将生成一个dist目录            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-04-16 23:44:52
                            
                                1682阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            用vue-resource向服务器请求数据我们主要来了解一下以下内容: 模拟服务端返回数据用vue-resource向服务器请求数据模拟服务器返回数据我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-server.js,在这个文件中,我们就可以来做一些模拟数据的工作。1、准备一个data.json文            
                
         
            
            
            
            
            1.访问接口 我们需要访问接口【http://localhost:28775/api/User/LoginUser】 2.修改 1)修改env.development的【VUE_APP_BASE_API】 2)在vue.config的devServer新增proxy,并且注释掉before prox ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-18 10:58:00
                            
                                1499阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1.访问接口 我们需要访问接口【http://localhost:28775/api/User/LoginUser】 2.修改 1)修改env.development的【VUE_APP_BASE_API】 2)在vue.config的devServer新增proxy,并且注释掉before prox ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-18 10:58:00
                            
                                1571阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            module.exports = {  NODE_ENV: '"production"',  //API_KEY:'"https://app-verify.iwonly.com/"',//你们的线上接口是否有统一的接口前缀,测试环境,  API_ROOT:'"https://app.iwonly.com/"' //正式环境}
                        
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-04-17 17:51:00
                            
                                814阅读
                            
                                                                                    
                                2评论