vue项目打包后(dist文件夹)放在本地nginx下和放在Linux服务器nginx下的页面访问效果不同,请问是什么问题?

新手上路,请多包涵

1,本地项目利用WebStrom做开发,vue框架;
2,项目在开发模式下运行(npm run dev),各功能表现的按照预期,主流浏览器(chrome, firefox, QQ, 360, 搜狗)兼容性良好;
3,打包(npm run build)在项目根目录下生成dist文件夹;
4,将dist文件夹放在本地的nginx下的html文件夹下,在nginx的配置文件中加入虚拟服务器节点信息,在本机上访问,各主流浏览器(chrome, firefox, QQ, 360, 搜狗)的访问效果和项目在开发模式下运行(npm run dev)是相同的;
5,将dist文件夹压缩(7-Zip打包成.tar文件),通过rz -be上传到Linux服务器,放在nginx的html下,tar -xvf 解压,Linux上服务器nginx配置信息和版本与本地nginx的信息都是一致的。此时访问Linux服务器上的页面,chrome与firefox、搜狗浏览器表现正常,与本地开发模式下运行效果无异;IE, QQ,360浏览器在字体、滚动条和textarea的placeholder上面,显示效果不同,textarea在输入时还有卡顿现象。
请问可能是什么原因,怎么排查?

阅读 7.5k
3 个回答

从你问题描述看,并没有确认IE浏览器访问开发模式是否正常? 请先确认一点,如果IE浏览器访问开发模式或者本地nginx也不正常,这就是最常见的IE兼容问题,需要你的代码对IE浏览器做特殊处理。 如果IE浏览器访问开发模式或者本地nginx都正常,但访问服务器nginx才不正常,这就比较奇怪了,可以比较一下从服务器nginx获取的html和本地nginx获取的html有什么不同,根据不同再来分析,一般来说,不太可能html一致,却一个正常一个不正常。

  1. 对于显示异常的浏览器,有没有打开控制台,看是否有error 或者 warning 产生。
  2. chrome 和 firefox 显示正常,我理解从 linux 上获取的页面内容应该是没有问题的,因为这两个浏览器对 web 标准支持的都非常好。
  3. 本地是否是 windows, 而在 linux 上出现问题的话,看看是否是不同系统间文本换行或编码不同,并且部分浏览器对这种情况处理的不好导致的
新手上路,请多包涵

请问解决了吗 我也遇到这样的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题