vue打包成dist部署到服务器白屏、报错

新建的VUE项目, 打包成dist部署到服务器白屏
1、查看报错信息


image.png

经过排查发现/js文件和页面不在一个路径下

2、解决办法
vue.config.js文件修改, 新增publicPath字段

修改前

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      fallback: {
        util: require.resolve('util'),
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),
        assert: require.resolve('assert'),
      }
    }
  }
});

修改后

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  publicPath: './',
  configureWebpack: {
    resolve: {
      fallback: {
        util: require.resolve('util'),
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),
        assert: require.resolve('assert'),
      }
    }
  }
});

3、重新打包验证--功能一切正常


截屏2025-07-22 16.39.51.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容