首页 > 其他分享 >vite打包配置viteCompession压缩但页面无法打开

vite打包配置viteCompession压缩但页面无法打开

时间:2024-01-31 15:22:17浏览次数:28  
标签:text image application viteCompession gzip vite 页面

前言

  后端换了服务器地址之后前端页面就无法访问,一直提示脚本加载失败

   常规做法无疑是更改base地址为 '/',当然这个具体地址还得看后端的Nginx配置

 

  but,前端在开启viteCompession并且后端也配置了gzip on,gzip_static on的情况下一直报错,在反复试错的情况下找到了解决方案;

 

第一步,Nginx配置gzip_types响应类

    gzip_types text/plain application/javascript application/x-javascript application/json text/css application/xml text/javascript application/x-httpd-php application/x-font-otf image/jpeg image/gif image/png image/svg+xml;

 

第二步,配置deleteOriginFile为false

viteCompression({
      verbose: true,
      disable: false,
      deleteOriginFile: false,
      algorithm: "gzip",
      ext: "gz",
}),

  

  好的,此时我们前端先npm install打包,再上传到git仓库,如果你有Xshell,再登录Xshell,找到你的nginx配置文件, sh 部署资源.sh,担心的话再nginx -s reload,此时刷新页面就可以看到啦,我们可以通过请求资源查看到是否开启了gzip。

  补充一点,如果下面的Etag地址没有W/则表示使用了我们的.gz压缩包,有W/则表示服务器压缩。

 

标签:text,image,application,viteCompession,gzip,vite,页面
From: https://www.cnblogs.com/zxd66666/p/17999327

相关文章

  • Page.ClientScript.RegisterClientScriptBlock 有时在前台页面无法注册的可能原因
    原因一:前台页面缺少<formid="form1"runat="server"></form>标签。加上即可。原因二:如果一个页面顺序执行多个Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"key","jsfunction")且RegisterClientScriptBlock方法的第二个参数为脚本的Key都为......
  • [word] word页面背景怎么打印
    在工作中有些技巧,可以快速提高工作效率,解决大部分工作,今天给大家分享word页面背景怎么打印的技巧,希望可以帮助到你。1、word背景打印设置点击文件左上角的【文件】菜单按钮ー一点击【选项】ーー点击【显示】ーー点击【打印选项】一一勾选“打印背景色和图像”,点击确定以上就是word......
  • [word] Word如何添加页面边框
    Word如何添加页面边框?经常需要添加裁剪样式的页面边框,应该怎么添加呢?1、点击开始-段落-编辑和底纹-页面边框,然后在艺术型上选择【带有剪刀的样式】,点击确定后即可。 以上就是添加Word页面边框的技巧,如果要添加其他样式的页面边框,也可以同样操作。......
  • px2rem vite
    1//vite.config.js23importpostcssPluginPx2remfrom'postcss-plugin-px2rem'45exportdefaultdefineConfig({6css:{7postcss:{8plugins:[9postcssPluginPx2rem({10......
  • Vite配置第三方组件全局样式遇坑
    项目使用了Vant组件库,想去改变全局的Toast样式有一个样式文件index.less,里面进行了Vant相关样式调整。希望通过构建,将其引入到自己的组件中开始通过preprocessorOptions进行引入,发现对Vant组件修改的样式不起效果,但是普通标签被修改样式后是有效果的preprocessorOptions:{......
  • 一个玻璃模糊登录页面
    代码部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • Vue3+Vant+Vite H5移动端开发(二)
    vue3项目创建使用vue创建项目命令npmcreatevue@latest基础配置配置IP和localhost打开项目,修改'package.json'文件下的‘scripts’配置--host0.0.0.0显示ip地址可以打开项目--open启动项目,在浏览器中自动打开"scripts":{"dev":"vite--host0.0.0.0......
  • vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg
    1.安装依赖:npminstallvite-plugin-svg-icons-D2.vite.config.ts中配置:import{createSvgIconsPlugin}from'vite-plugin-svg-icons'//在exportdefault({command,mode}:ConfigEnv):UserConfig中的plugins数组中添加代码plugins:[createSvgIconsPlugin......
  • [word] word中页面设置选项中系统默认的纸张大小是多少?
     word中页面设置选项中系统默认的纸张大小是A4。默认的纸张大小可以自己设置,设置方法如下:1、双击打开Word文档。2、切换至页面布局选项。3、点击页面设置功能区的右下角。4、点击纸张大小,可以看到默认的纸张大小,我们可以更改默认的纸张大小,然后点击下方的“设为默认值”按钮即可。......
  • 组织机构管理页面,使用左树右表,还是树形表格进行展示更加合理?给出最佳实践
    在组织机构管理页面的设计中,左树右表和树形表格都是用来展示具有层级结构数据的有效方式。选择哪种布局取决于具体的使用场景、交互需求和用户体验目标。以下是对两种方式的分析以及最佳实践:左树右表优点:结构清晰:左侧树用于展现层级关系,右侧表格详细展示选中节点下的成员信......