生产模式问题（Rails 5.2.4.1 + VueJS + Webpack 3.12 + Heroku）

Question

I have a problem with production mode. When I start my app on a locale machine everything is fine, but in console I have a message:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

But when I start my app on heroku I can't see VueJS. And I have the next error in console.

[Vue warn]: Cannot find element: #app

Here is some my files: index.html.erb

<div id='app'>
<router-view></router-view>
</div>

application.js

    import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
import BaseStore from './store/base'

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(VueResource)

import  Index from './templates/index.vue'
import Logs from './templates/logs.vue'
import Devices from './templates/devices.vue'


document.addEventListener('DOMContentLoaded', () =>{
  document.body.appendChild(document.createElement('app'))
  const router = new VueRouter({
    routes:[
      { path: '/' , component: Index , name: 'index'},
      { path: '/logs', component: Logs, name: 'logs'},
      { path: '/device', component: Devices, name: 'devices'}
    ]
  })

const store = new Vuex.Store(BaseStore)

const app = new Vue({
  router: router,
  store: store
}).$mount('#app')
})

Answer 1

Error comes from: document.body.appendChild(document.createElement('app'))

This creates an <app> node, not a <div id="app"> node, so later on the .$mount("#app") cannot effectively find the node.

Replace your document.createElement part with:

const app = document.createElement('div')
app.id = 'app'

document.body.appendChild(app)

That should do it.