Vue使用npm run build 打包样式与本地不符

最新推荐文章于 2024-07-23 18:40:25 发布

东北大Nemo

最新推荐文章于 2024-07-23 18:40:25 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/itgaojian1994/article/details/123168223

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在将Activiti工作流集成到系统中时，开发者遇到一个问题：编辑页面在本地环境显示正常，但在服务器生产环境中显示不全。经过排查，确定问题出在前端部分。尽管尝试了更换Node版本和使用同事电脑打包，问题依然存在。后来从webpack的警告信息中找到线索，发现某些文件大小超过了推荐限制。通过调整webpack配置，增大文件大小限制，成功解决了问题，使得生产环境的页面显示恢复正常。

摘要由CSDN通过智能技术生成

问题描述：

系统中集成Activiti 工作流时，发现编辑页面与本地开发环境显示不符，

本地开发环境：

服务器生产环境：

本地环境可以显示各种工具，服务器就很短。F12查看按钮其实是有的。

因为数据库和后台都是一致的，所以问题锁定在前端部分。

猜测是node版本问题，换版本也不行。用同事电脑打包也是一个效果。

由于个人开发久了有个老毛病，只看error 不看warning，相信很多老程序员都会有这个问题。

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

意思是说有的文件超出限制。得到这个线索打开度娘翻到一个帖子复制粘贴大法

问题解决方法原文地址

configureWebpack: config => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === 'production') {
      config.mode = 'production';
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000
      }
    }
  },

重新打包后警告消失发布服务器问题解决

通往成功的路没有捷径。