Rails 5 + Webpacker 应用程序作为空白页面部署到 Heroku，没有失败

Question

我有一个简单的 Rails 5.1 应用程序，它使用 Webpacker 和 Vue.js。它与webpack-dev-server 在开发中完美配合。当我推送到 Heroku 存储库时，它完成时没有错误，也没有任何异常。 HTML 页面呈现，但应呈现 Vue.js 应用程序的 <div id="app"> 元素仅被注释替换：

<!--function (e,n,r,o){return on(t,e,n,r,o,!0)}-->

JavaScript 包文件确实在那里，我看了看，似乎都是正确的。

我尝试用 Node.js Buildpack 和 Ruby Buildpack 替换普通的 Ruby buildpack，但无济于事。这是完整的 Heroku 部署日志：

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.4.0)...
       Installed yarn 1.4.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.4.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.1.3: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
       warning " > vue-loader@13.7.1" has unmet peer dependency "css-loader@*".
       warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
       [4/4] Building fresh packages...
       Done in 20.38s.
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
 !     Unmet dependencies don't fail yarn install but may cause runtime issues
       https://github.com/npm/npm/issues/7494
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.5.0
-----> Installing dependencies using bundler 1.15.2
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       Fetching gem metadata from https://rubygems.org/.........
       Fetching version metadata from https://rubygems.org/..
       Fetching dependency metadata from https://rubygems.org/.
       Using rake 12.3.0
       Using concurrent-ruby 1.0.5
       Using minitest 5.11.3
       Using thread_safe 0.3.6
       Using builder 3.2.3
       Using erubi 1.7.0
       Using mini_portile2 2.3.0
       Using crass 1.0.3
       Using rack 2.0.4
       Using nio4r 2.2.0
       Using websocket-extensions 0.1.3
       Using mini_mime 1.0.0
       Using arel 8.0.0
       Using execjs 2.7.0
       Using bundler 1.15.2
       Using ffi 1.9.18
       Using multi_json 1.13.1
       Using method_source 0.9.0
       Using pg 0.21.0
       Using puma 3.11.2
       Using thor 0.20.0
       Using rb-fsevent 0.10.2
       Using redcarpet 3.4.0
       Using tilt 2.0.8
       Using temple 0.8.0
       Using yard 0.9.12
       Using i18n 0.9.3
       Using tzinfo 1.2.5
       Using nokogiri 1.8.2
       Using rack-test 0.8.2
       Using rack-proxy 0.6.3
       Using sprockets 3.7.1
       Using autoprefixer-rails 7.2.5
       Using mail 2.7.0
       Using websocket-driver 0.6.5
       Using rb-inotify 0.9.10
       Using activesupport 5.1.4
       Using slim 3.0.9
       Using loofah 2.1.1
       Using sass-listen 4.0.0
       Using rails-dom-testing 2.0.3
       Using globalid 0.4.1
       Using activemodel 5.1.4
       Using jbuilder 2.7.0
       Using rails-html-sanitizer 1.0.3
       Using sass 3.5.5
       Using activerecord 5.1.4
       Using activejob 5.1.4
       Using actionview 5.1.4
       Using actionpack 5.1.4
       Using actioncable 5.1.4
       Using railties 5.1.4
       Using sprockets-rails 3.2.1
       Using actionmailer 5.1.4
       Using responders 2.4.0
       Using sass-rails 5.0.7
       Using slim-rails 3.1.3
       Using webpacker 3.2.1
       Using rails 5.1.4
       Bundle complete! 22 Gemfile dependencies, 59 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into ./vendor/bundle.
       Bundle completed (2.81s)
       Cleaning up the bundler cache.
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       The latest bundler is 1.16.1, but you are currently running 1.15.2.
       To update, run `gem install bundler`
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.4.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.1.3: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
       warning " > vue-loader@13.7.1" has unmet peer dependency "css-loader@*".
       warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
       [4/4] Building fresh packages...
       Done in 21.12s.
       Webpacker is installed ???? ????
       Using /tmp/build_d85ffa3d23df7c297f570fcf78860053/config/webpacker.yml file for setting up webpack paths
       Compiling…
       Compiled all packs in /tmp/build_d85ffa3d23df7c297f570fcf78860053/public/packs
       Asset precompilation completed (44.22s)
       Cleaning assets
       Running: rake assets:clean
-----> Discovering process types
       Procfile declares types     -> hot, web
       Default types for buildpack -> console, rake, worker
-----> Compressing...
       Done: 70.3M
-----> Launching...
       Released v12
       https://tbm-budget.herokuapp.com/ deployed to Heroku

Answer 1

这最终成为我的 Vue 运行时配置的问题。你可能知道，如果你在 Webpack 中使用 vue-loader，你的 Vue 模板会被预编译成渲染函数。然后，您不必在生产环境中加载 Vue 运行时，因为没有动态编译模板（就像它们通常在开发中一样）。

问题是我的 Vue 引导代码创建并挂载了根元素。我打电话给new Vue({el: '#app', ...})（和<div id="app"><my-content-here /></div>），但它本身是一个未编译的模板，在生产中不起作用。

解决方案是编写一个带有自己渲染函数的预编译模板，并安装它：new Vue({render: function() { ... }}).$mount(document.getElementByID('app'))。就我而言，我刚刚创建了一个非常简单的 .vue 文件，其中包含根 <router-view> div（用于 Vue-Router）、imported 和 $mounted。