项目:taro3+vue3+taroUiVue3
问题描述
taroUiVue3组件在浏览器中不显示,如下:
解决方法
可以按照node_modules/taro-ui-vue3/README.md的步骤
1、config文件夹中添加h5-building-script.js
const path = require('path')
const fs = require('fs')
const distH5Vue3IndexPath = path.resolve(__dirname, '../node_modules/@tarojs/components/dist-h5/vue3/index.js')
const distH5vue3IndexNew = `
// This file is generated by config/h5-building-script.js
import createComponent from './createComponent'
import { simpleComponents } from '../vue/simpleComponents'
import createFormsComponent from './createFormsComponent'
import Text from './components/text'
import Image from './components/image'
import Icon from './components/icon'
import ScrollView from './components/scroll-view'
function genSimpleComponents(components) {
const componentMap = {}
components.map(component => {
if (typeof component === 'string') {
componentMap[component] = createComponent(component)
} else {
const { name, classNames } = component
componentMap[name] = createComponent(name, classNames)
}
})
return componentMap
}
const componentMap = genSimpleComponents(simpleComponents)
// simple components
export const View = componentMap['taro-view']
export const RichText = componentMap['taro-rich-text']
export const Button = componentMap['taro-button']
export const CheckboxGroup = componentMap['taro-checkbox-group']
export const Editor = componentMap['taro-editor']
export const Form = componentMap['taro-form']
export const Label = componentMap['taro-label']
export const PickerView = componentMap['taro-picker-view']
export const PickerViewColumn = componentMap['taro-picker-view-column']
export const CoverImage = componentMap['taro-cover-image']
export const CoverView = componentMap['taro-cover-view']
export const MoveableArea = componentMap['taro-moveable-area']
export const MoveableView = componentMap['taro-moveable-view']
export const Swiper = componentMap['taro-swiper']
export const FunctionalPageNavigator = componentMap['taro-functional-page-navigator']
export const Navigator = componentMap['taro-navigator']
export const Audio = componentMap['taro-audio']
export const Camera = componentMap['taro-camera']
export const LivePlayer = componentMap['taro-live-player']
export const Map = componentMap['taro-map']
export const Ad = componentMap['taro-ad']
export const OfficialAccount = componentMap['taro-official-account']
export const OpenData = componentMap['taro-open-data']
export const WebView = componentMap['taro-web-view']
export const NavigationBar = componentMap['taro-navigation-bar']
export const Block = componentMap['taro-block']
export const Canvas = componentMap['taro-canvas']
// simple components with classNames
export const Checkbox = componentMap['taro-checkbox']
export const Progress = componentMap['taro-progress']
export const RadioGroup = componentMap['taro-radio-group']
export const Radio = componentMap['taro-radio']
export const SwiperItem = componentMap['taro-swiper-item']
export const Video = componentMap['taro-video']
// Form components
export const Input = createFormsComponent('taro-input', 'input')
export const Textarea = createFormsComponent('taro-textarea', 'input')
export const Picker = createFormsComponent('taro-picker', 'change')
export const Switch = createFormsComponent('taro-switch', 'change', 'checked')
export const Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box'])
export function initVue3Components(app) {
app.config.isCustomElement = tag => /^taro-/.test(tag) || tag === 'root' || tag === 'block'
for (const [name, component] of Object.entries(componentMap)) {
app.component(name, component)
}
app.component('taro-input', Input)
app.component('taro-textarea', Textarea)
app.component('taro-picker', Picker)
app.component('taro-switch', Switch)
app.component('taro-slider', Slider)
app.component('taro-text', Text)
app.component('taro-image', Image)
app.component('taro-icon', Icon)
app.component('taro-scroll-view', ScrollView)
}
export {
// others
Text,
Image,
Icon,
ScrollView
}
`
fs.writeFileSync(distH5Vue3IndexPath, distH5vue3IndexNew, { encoding: 'utf-8' })
2、config/index.js中配置
h5: {
webpackChain(chain) {
chain.resolve.alias
.set(
'@tarojs/components$',
'@tarojs/components/dist-h5/vue3/index.js'
)
},
}
3、package.json中配置
"build:h5": "node ./config/h5-building-script.js && taro build --type h5",
5、运行npm run dev:h5,完美解决~~