Webpacker+Vue+Rails生产构建及生产环境资源加载406错误排查

我之前在维护Rails+Vue项目时也碰到过几乎一模一样的问题，结合踩过的坑，给你整理几个优先级从高到低的排查和解决方向，按顺序试下来应该能搞定：

1. 先把Webpacker生产配置拉回正轨 #

首先去检查config/webpacker.yml里的production段配置，这几个参数一定要盯紧：

• public_output_path: 必须是packs，确保和你预编译到public/packs的路径完全匹配
• compile: 生产环境下必须设为false，要是开着的话，Rails会尝试实时编译资源，不仅慢还容易触发各种奇怪的路由冲突
• cache_manifest: 建议设为true，确保资源的指纹引用能正确对应到预编译后的文件

改完保存后，重新跑一遍bundle exec rake webpacker:compile，再重启生产服务器试试。

2. 排查Rails资产管道和Webpacker的冲突 #

因为你同时用了Rails自带的assets目录和Webpacker的packs，很容易出现路由或资源处理逻辑的冲突：

• 打开config/environments/production.rb，确认这几个配置：
  • config.public_file_server.enabled = true：必须开着，不然Rails不会处理静态文件请求
  • config.assets.compile = false：生产环境绝对不能开实时编译，会干扰Webpacker的资源加载
  • config.assets.digest = true：启用指纹，确保页面引用的资源路径是带哈希的正确路径
• 另外检查一下路由文件config/routes.rb，有没有自定义的get '/packs/*path'这类路由，会把Webpacker的资源请求误导向到控制器，导致返回那个奇怪的注释内容。

3. 验证页面的资源引用是否正确 #

打开生产环境的页面源码，看看CSS和JS的引用路径：

• 必须是/packs/xxx-[哈希值].css和/packs/xxx-[哈希值].js这种格式，而不是开发环境的动态路径
• 如果路径里没有哈希，说明manifest文件没正确生成，或者你在视图里用了硬编码的路径（一定要用javascript_pack_tag和stylesheet_pack_tag来生成引用）

4. 检查Webpack编译的实际产物 #

有时候看着public/packs里有文件，但实际内容根本不对：

• 直接打开public/packs下的JS文件，看看是不是真的包含Vue应用的代码，而不是那个<!-- Used to get Vue Page displayed -->注释。如果还是注释，说明Webpack编译过程悄悄出错了，只是没抛出错误
• 手动跑一遍RAILS_ENV=production bundle exec webpack，盯着控制台输出，有没有依赖缺失、语法错误或者Vue组件的编译问题
• 检查Vue组件里有没有用未转译的ES6+语法，比如可选链操作符之类的，要是Babel配置没跟上，生产编译会失败

5. 确保服务器正确处理静态文件 #

如果你只是用rails server在测试生产环境（注意实际生产别这么干，用Nginx+Puma/Passenger才是标准操作），启动的时候加上--static参数：

RAILS_ENV=production rails server --static

这个参数会强制Rails处理静态文件请求，避免把/packs下的资源转发给控制器处理。

如果是用Nginx这类前端服务器，一定要确保配置里把/packs和/assets路径直接指向public目录，不要转发给Rails应用，静态文件让Nginx直接处理效率更高也更不容易出问题。

6. 彻底清理缓存后重新编译 #

缓存是很多奇怪问题的根源，试试把所有缓存清干净再重新编译：

# 清理Webpacker的编译缓存
bundle exec rake webpacker:clean
# 清理Rails资产管道的缓存
bundle exec rake assets:clean
# 删掉tmp目录下的缓存文件
rm -rf tmp/cache
# 重新编译所有资源
bundle exec rake assets:precompile webpacker:compile

编译完成后再启动生产服务器测试。

要是以上步骤都试过还是不行，建议检查Rails和Webpacker的版本兼容性，比如Webpacker 5.x和Rails 6.1+是比较稳定的组合，旧版本可能存在生产环境的适配bug，必要时升级到兼容的版本。

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