我有一个简单的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 构建包替换普通的 Ruby 构建包，然后是 Ruby 构建包，但无济于事。这是完整的 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
这最终成为我的 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(，import编辑了它，并对其进行了$mount编辑。