我正在使用 vue-cli。我尝试直接在 index.html 文件中添加 aframe,并将其导入到我的顶级 main.js 文件中。我就是无法让 Vue 识别 aframe 元素。
我是否在文档中遗漏了一些样板文件?
警告示例:
vue.runtime.esm.js:619 [Vue warn]:未知的自定义元素:- 您是否正确注册了组件?对于递归组件, 确保提供“名称”选项。
您可以将
aframe
添加到 dependencies
中的 package.json
:
"browserify-css": "*", // required by aframe
"envify": "*", // required by aframe
"aframe": "^1.2.0", // aframe
将
aframe
添加到已编译的包中:
var Vue = require('vue')
var App = require('./app.vue')
require('aframe')
new Vue({
el: '#app',
render: function (createElement) {
return createElement(App)
}
})
并使用您的
<template>
中的元素:
<template>
<div>
<a-scene>
<a-cylinder color="#FFC65D"></a-cylinder>
</a-scene>
</div>
</template>
在这个故障
中检查一下为了消除警告,我建议使用放置在 main.js 中的 Vue.config.ignoredElements 添加一组组件 像这样:
Vue.config.ignoredElements = [
'a-scene',
'a-camera',
'a-box'
'a-image',
]
有关组件的完整列表,请查看此存储库:aframe-components-list
我建议使用 Vue.config.ignoredElements 而不是像普通 Vue 组件一样注册 A-Frame 组件,因为它们不是 Vue 组件。
在 Vue 3 中,main.js 中的 Vue.config.ignoredElements 将不起作用。
相反,在您的 vue.config.js 文件中添加以下代码:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('a-')
}
return options
})
}
}
这应该涵盖以“a-”开头的自定义元素。
Vite(和 Vue.js 3)代码:
//vite.config.js
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith("a-"),
},
},
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});