ruby-on-rails 更新的Vue3 on Rails和vue组件停止显示，没有任何错误：(

b5buobof 于 2023-06-25 发布在 Ruby

关注(0)|答案(2)|浏览(136)

我从Vue2更新到Vue3，现在有点卡住了。我在Rails中使用它。问题是一切都在加载和编译，而不是错误。我加载我的网页，看到的一切，而不是Vue文件。完全不知道如何修复它：（有什么想法吗？也许我没有看到smth或不知道在哪里寻找它。
如果我在应用程序文件上更改smth，它会显示一些更改或错误。我甚至删除了所有内容并添加了Vue文件，就像教程中显示的那样，仍然没有任何工作。
application.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);

envirement.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

package.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-rails

来源：https://stackoverflow.com/questions/67086491/updated-vue3-on-rails-and-vue-components-stop-show-up-at-all-without-errors

2条答案

按热度按时间

v2g6jxz61#

我遇到过类似的问题，我最好的猜测是turbolinksAdapterMixin。Vue 3将destroy钩子更改并重命名为unmounted钩子（参见此处），并对其组件API进行了其他更改。我相信，vue-turbolinks包仍然使用Vue 2的功能，例如$on，$off和$once用于事件。
Turbolinks的工作方式是通过 AJAX 获取“下一个HTML主体”，然后替换document.body。因此，您需要做的-并且已经正确地做了-是在turbolinks:load的事件侦听器中使用createApp创建Vue 3 App（当主体成功替换时）。
然后，你必须在离开页面（即单击turbolinks链接）时使用unmount()拆除，即卸载Vue应用程序。
因此，你必须替换你的代码：

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();
});

赞(0）回复(0）举报 2023-06-25

2nbm6dog2#

This article talks about获得rails 7与涡轮驱动（涡轮链接替换）与vue3和vuetify一起工作。
希望这能帮助你得到它。

赞(0）回复(0）举报 2023-06-25