我為帶有 rails 7 和 shakapacker 的 shopify 應用程式創建了一個新專案。我想在我的 .slim 檔案中使用 Vue 組件。問題是 Vue 似乎沒有加載到我的應用程式中，盡管我沒有收到任何錯誤。
這是我所做的：
// config/webpack/rules/vue.js
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
resolve: {
extensions: [
'.vue'
]
}
}
// config/webpack/webpack.config.js
const { webpackConfig, merge } = require('shakapacker')
const vueConfig = require('./rules/vue')
module.exports = merge(vueConfig, webpackConfig)
// app/javascript/packs/application.js
import HelloWorld from '../components/HelloWorld'
import { createApp } from 'vue'
const app = createApp({
el: '#app'
})
app.component('helloworld', HelloWorld)
document.addEventListener('DOMContentLoaded', () => {
app
})
// app/javascript/components/HelloWorld.vue
<template>
<h1>Hello world</h1>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
/ app/views/layouts/embedded_app.slim
doctype html
html[lang="en"]
head
meta[charset="utf-8"]
- application_name = ShopifyApp.configuration.application_name
title
= application_name
= stylesheet_link_tag "application", "data-turbo-track": "reload"
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
= csrf_meta_tags
body
#app
.wrapper
main[role="main"]
= yield
= content_tag(:div, nil, id: 'shopify-app-init', data: { api_key: ShopifyApp.configuration.api_key,
shop_origin: @shop_origin || (@current_shopify_session.shop if @current_shopify_session),
host: @host,
debug: Rails.env.development? })
最后，我只想顯示HelloWorld.vue組件的視圖：
/ app/views/home/index.slim
helloworld
但是，什么都沒有顯示，我也沒有錯誤。我嘗試用這種方式修改應用程式的創建，看看是否出現日志：
// app/javascript/packs/application.js
import HelloWorld from '../components/HelloWorld'
import { createApp } from 'vue'
const app = createApp({
el: '#app',
created () {
console.log('ok')
}
})
app.component('helloworld', HelloWorld)
document.addEventListener('DOMContentLoaded', () => {
app
})
但是話又說回來，我在控制臺中什么都沒有，所以我什至不確定應用程式是否渲染得很好。另一方面，我檢查了DOMContentLoaded事件確實被觸發了。
我對 webpack 不是很滿意，所以我不知道我的配置是否有問題，我按照 shakapacker 的 README 進行操作。
我不認為這是相關的，但該應用程式是通過 Ngrok 隧道在 Shopify 測驗商店中呈現的。
我不知道去哪里找了......有人有想法嗎？提前致謝
uj5u.com熱心網友回復：
我很久沒有寫過任何 VueJS，但這通常是我在 application.js 中使用 React 和 Shopify Polaris 組件所做的。
function initialize() {
const rootElement = document.getElementById('app')
const root = createRoot(rootElement);
/* some app bridge code I removed here */
/* react 18 */
root.render(
<BrowserRouter>
/* ... */
</BrowserRouter>
)
}
document.readyState !== 'loading' ? initialize() : document.addEventListener('DOMContentLoaded', () => initialize())
如果您<div id="app">在使用瀏覽器工具檢查時是 EMPTY，我的第一個猜測是您正在創建一個實體，但最終并未實際渲染它。
在呼叫 .mount() 方法之前，應用程式實體不會呈現任何內容。
https://vuejs.org/guide/essentials/application.html#mounting-the-app
我會先評論問一下，但我沒有足夠的聲望點來這樣做
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496212.html
上一篇：有沒有辦法為webpack中的特定依賴項指定目標解析度？
下一篇：物件可能未定義