ruby-on-rails - 更新的 Vue3 on Rails 和 vue 组件完全停止显示，没有错误:(

Question

我从 Vue2 更新到 Vue3，现在有点卡住了。我在 Rails 中使用它。一切都在加载和编译的问题，根本没有错误。我加载我的网页并查看所有内容而不是 Vue 文件。根本不明白如何解决它:(有什么想法吗？也许我没有看到或不知道在哪里寻找它。

如果我在应用程序文件上进行更改，它会显示一些更改或错误。我什至删除了所有内容并添加了教程中的 Vue 文件，但仍然没有任何工作。

应用程序.js

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

import Routes from '../routes/index.js.erb';
import '../css/index.css'

window.Routes = Routes;


import {createApp} from 'vue';
import Customer from '../customer.vue'
import CustomerSearch from '../customer_search.vue'
import CustomerPackages from '../customer_packages.vue'
import BusinessCases from '../business_cases.vue'
import SearchPanel from '../components/business_case/SearchPanel.vue'

import {turbolinksAdapterMixin} from "vue-turbolinks";
import Clipboard from 'v-clipboard'



document.addEventListener('turbolinks:load', () => {
        const app = createApp({
        el: "[data-behavior='vue']",
        mixins: [turbolinksAdapterMixin],
    })
})

app.component('customer', Customer);
app.component('customer-search', CustomerSearch);
app.component('packages', CustomerPackages);
app.component('business-cases', BusinessCases);
app.component('search-panel', SearchPanel);

环境.js

const { environment } = require('@rails/webpacker')

const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const erb = require('./loaders/erb')
const pug = require('./loaders/pug')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('erb', erb)
environment.loaders.prepend('pug', pug)

module.exports = environment

包.json

{
  "name": "backyard",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.4.0",
    "@vue/cli": "^5.0.0-alpha.8",
    "axios": "^0.21.0",
    "css-loader": "^5.0.2",
    "dayjs": "^1.10.4",
    "litepie-datepicker": "^1.0.13",
    "node-sass": "4.14",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "rails-erb-loader": "^5.5.2",
    "sass": "^1.32.7",
    "sass-loader": "^11.0.1",
    "turbolinks": "^5.2.0",
    "v-clipboard": "^2.2.3",
    "vue": "^3.0.2",
    "vue-clickaway": "^2.2.2",
    "vue-clipboards": "^1.3.0",
    "vue-fuse": "^2.2.1",
    "vue-loader": "^16.2.0",
    "vue-nav-tabs": "^0.5.7",
    "vue-pdf": "^4.2.0",
    "vue-pug": "^4.0.0",
    "vue-turbolinks": "^2.1.0",
    "webpack": "4"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "@vue/compiler-sfc": "^3.0.11",
    "@webpack-cli/serve": "^1.3.0",
    "autoprefixer": "9",
    "postcss": "7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "vue-cli-plugin-pug": "~2.0.0",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": [
    "defaults"
  ]
}

标签： ruby-on-railsvue.jsvuejs3

Answer 1

我遇到了类似的问题，我最好的猜测是turbolinksAdapterMixin. 除了对其组件 API 的其他更改之外，Vue 3 将钩子更改并重命名destroy为unmounted钩子（请参阅此处）。我相信，包vue-turbolinks仍然使用 Vue 2 的功能，例如$on,$off和$oncefor events。

工作方式Turbolinks是通过 AJAX 获取“下一个 HTML 正文”，这反过来又替换了document.body. 所以，你需要做的——并且已经正确地做了——是createApp在事件监听器中创建 Vue 3 应用程序turbolinks:load（当主体被成功替换时）。

然后，您必须在离开页面（即单击 turbolinks 链接）后立即拆除（即卸载）您的 Vue 应用程序unmount()。

因此，您必须替换您的代码：

document.addEventListener('turbolinks:load', () => {
  const app = createApp({
    el: "[data-behavior='vue']",
    mixins: [turbolinksAdapterMixin],
  })
})

有了这个：

let app;

document.addEventListener('turbolinks:load', () => {
  app = createApp({});
  app.mount("[data-behavior='vue']");
});

// this event listener is executed as soon as
// the new body was fetched successfully but
// before replacing the `document.body`
document.addEventListener('turbolinks:before-render', () => {
  if (app) app.unmount();
});