Rails+Vue.js本地开发出现net::ERR_ABORTED 404空白页问题求助

问题概况 #

近半年本地开发环境频繁出现页面空白，控制台报net::ERR_ABORTED 404 (Not Found)，多次刷新才能恢复，严重拖慢开发节奏。

技术栈 #

• Rails 5.0.7.2
• Vue.js 2
• webpack
• webpacker@4.2.0

配置文件 #

package.json #

"engines": {
    "node": "^10.#",
    "yarn": "^1"
  },
  "resolutions": {
    "vue": "2.#.#",
    "vue-template-compiler": "2.#.#",
  },
  "scripts": {
    "start": "./bin/webpack-dev-server",
  },

webpacker.yml #

default: &default
  source_path: app/javascript
  webpack_compile_output: true
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  public_root_path: public

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']
  compile: false

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0
    port: 3040
    public: 0.0.0.0:3040
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default

  # Compile test packs to a separate directory
  public_output_path: packs

testing:
  <<: *default

  # Compile test packs to a separate directory
  public_output_path: packs

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

app:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: false

报错截图 #

排查与解决步骤 #

1. 清理webpack缓存
   直接删除缓存目录，重启服务：

   rm -rf tmp/cache/webpacker
   

   之后重启Rails和webpack-dev-server，多数临时编译异常可通过此步骤解决。

2. 修正依赖版本格式
   package.json里的^10.#、2.#.#属于无效版本格式，替换为具体兼容版本，示例：

   "engines": {
     "node": "^10.24.1",
     "yarn": "^1.22.19"
   },
   "resolutions": {
     "vue": "^2.7.14",
     "vue-template-compiler": "^2.7.14"
   }
   

   执行yarn install重新安装依赖，避免版本解析混乱。

3. 检查webpack-dev-server状态
   确保dev-server未静默崩溃，启动时查看日志是否有编译失败提示，当前配置quiet: false已开启详细日志输出，重点关注entry文件的编译状态。

4. 临时禁用HMR
   将webpacker.yml中development环境下的hmr: true改为false，关闭热模块替换后测试是否仍出现404。旧版webpacker的HMR功能偶尔会导致资源路径映射异常。

5. 验证manifest文件
   执行rails webpacker:manifest生成最新的manifest.json，检查文件内的资源路径是否与页面请求路径一致，确保Rails能正确定位webpack编译后的资源。

6. 确认资源引用路径
   检查视图中javascript_pack_tag、stylesheet_pack_tag引用的资源名称，需与app/javascript/packs下的entry文件名完全匹配（注意大小写）。

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