Rails 6 + Webpacker 4 + Vuejs ошибка сборки только во время выполнения и шаблон становится функциональным комментарием - PullRequest
Новая
       41

Rails 6 + Webpacker 4 + Vuejs ошибка сборки только во время выполнения и шаблон становится функциональным комментарием

0 голосов
/ 08 ноября 2019

Я строю новый проект с использованием Rails 6 + Webpacker 4 и Vuejs. Я использую шаблон по умолчанию, который мне дает веб-упаковщик, и есть некоторые ошибки, которые я искал, но не могу найти.

Вот мой код 

// package.json

{
  "name": "round_table",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "core-js": "^3.4.0",
    "css-loader": "^3.2.0",
    "regenerator-runtime": "^0.13.3",
    "tailwindcss": "^1.1.3",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10",
    "vue-turbolinks": "^2.0.4",
    "webpack": "^4.0.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment

// packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "core-js/stable";
import "regenerator-runtime/runtime";

import '../styles/application.css'

# layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RoundTable</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'hello_vue', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="min-h-screen bg-gray-100">
    <div class="container mx-auto">
      <%= yield %>
    </div>
  </body>
</html>

// my template
<div id='hello'>
  {{message}}
  <app></app>
</div>

// hello_vue.js

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

// import Vue from 'vue'
// import App from '../app.vue'

// document.addEventListener('DOMContentLoaded', () => {
//   const app = new Vue({
//     render: h => h(App)
//   }).$mount()
//   document.body.appendChild(app.$el)

//   console.log(app)
// })


// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>


// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// document.addEventListener('DOMContentLoaded', () => {
//   const app = new Vue({
//     el: '#hello',
//     data: {
//       message: "Can you say hello?"
//     },
//     components: { App }
//   })
// })
//
//
//
// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:
//
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue'
import App from '../app.vue'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#hello',
    data: () => {
      return {
        message: "Can you say hello?"
      }
    },
    components: { App }
  })
})

Я знаю, что здесь я использую vue run-only build. Но, как vue doc сказал:

При использовании vue-loader или vueify шаблоны внутри файлов * .vue предварительно компилируются в JavaScript во время сборки. Вам на самом деле не нужен компилятор в конечном пакете, и поэтому вы можете использовать сборку только во время выполнения.

Vue-loader находится в моем пакете, но консоль показывает ошибку:

[Предупреждение Vue]: вы используете сборку Vue только во время выполнения, когда компилятор шаблона недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга, либо используйте компилятор, включенный в сборку.

И мой html для экземпляра vue становится комментарием: 

<!--
function (a, b, c, d) {
    return createElement(vm, a, b, c, d, true);
  }
-->

Там много людейПредлагаю использовать полную сборку для устранения этой ошибки, но я хочу использовать сборку только во время выполнения. Я новичок в вебпаке. После дня поиска, я решил спросить здесь. Может кто-то помочь мне, пожалуйста? Большое вам спасибо.

P / s: Я не очень хорош в английском, извините за мой плохой английский.

...