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

我有一个简单的Rails 5.1应用程序，它使用Webpacker和Vue.js. 它在webpack-dev-server开发中非常webpack-dev-server 。 当我推送到Heroku存储库时，它完成时没有任何错误，也没有任何看似exception的东西。 HTML页面呈现但是应该呈现Vue.js应用程序的

元素仅由注释替换：

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', ...}) （使用

），但这本身就是一个未编译的模板，不会在生产中工作。

解决方案是使用自己的渲染函数编写预编译模板，然后安装： new Vue({render: function() { ... }}).$mount(document.getElementByID('app')) 。 在我的例子中，我刚刚创建了一个非常简单的.vue文件，其中包含根 div（用于Vue-Router）， import ed和$mount ed。