Vue3 SSR项目构建失败问题求助

一、先获取SSR构建的具体错误信息 #

当前vue.config.js中删除了friendly-errors插件，导致webpack仅返回笼统的"Build failed with errors"，无法定位具体问题。先恢复错误日志输出：

修改vue.config.js，注释掉删除friendly-errors和progress的代码：

// webpackConfig.plugins.delete("progress");
// webpackConfig.plugins.delete("friendly-errors");

然后重新执行npm run pressr，此时会显示具体的编译错误（比如组件语法错误、依赖缺失等），这是解决构建失败的关键前提。

二、修复@vue/server-renderer版本不兼容问题 #

你的package.json中vue版本是3.2.13，但@vue/server-renderer是3.0.0-rc.5，版本差距过大，存在严重兼容性问题。执行以下命令升级到匹配版本：

npm install @vue/server-renderer@3.2.13 --save

三、解决非SSR模式的eval相关错误 #

虽然你没有直接使用eval，但部分依赖库（比如vue-the-mask）内部可能使用了eval，或者webpack的source map配置导致eval出现，可尝试以下方案：

方案1：替换可疑依赖 #

vue-the-mask的旧版本可能存在使用eval的情况，建议替换为更现代的掩码库，比如@vueform/mask（和你已安装的@vueform/slider同属一个生态，兼容性更好）：

npm uninstall vue-the-mask
npm install @vueform/mask --save

然后替换项目中vue-the-mask的使用代码。

方案2：调整webpack的source map配置 #

在vue.config.js的非SSR分支中添加devtool配置，避免使用eval类的source map：

if (!process.env.SSR) {
  webpackConfig.devServer.disableHostCheck(true);
  // 添加以下配置
  webpackConfig.devtool('source-map');
  return;
}

这样webpack会生成独立的source map文件，而非通过eval嵌入。

四、其他优化检查 #

1. 移除package.json中重复依赖：webpack-manifest-plugin、webpack-node-externals、webpack-nano同时出现在dependencies和devDependencies中，建议只保留在devDependencies里。
2. 确认src/main.server.js存在且配置正确：入口文件需导出一个可被server-renderer调用的函数，用于创建SSR应用实例。

执行完以上步骤后，重新尝试npm run pressr构建SSR项目，再运行npm run ssr启动服务。

内容的提问来源于stack exchange，提问作者Alemanthea