vue项目中读取文件内容

previewWx.vue 文件中代码如下：

<template>
    <div class="pre-code-box">
        <transition name="slide-fade">
            <pre class="language-html" v-if="showCode" v-highlight>
                <code class="language-html">{{  sourceCode  }}code>
            pre>
        transition>
        <div class="showCode">
            <div class="tool-wrap" @click="showOrhideCode">
                <i :class="iconClass">i>
                <span>{{ showCode ? '隐藏代码' : '显示代码' }}span>
            div>
            <div class="tool-wrap" @click="doCopy" style="margin-left: 20px">
                <el-icon><CopyDocument />el-icon>
                <span>复制代码span>
            div>
        div>
    div>
template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import emitter from '../../packages/utils/bus'

const props = defineProps({
    compName: {
        type: String,
        default: '',
        require: true
    },
    demoName: {
        type: String,
        default: '',
        require: true
    }
})

const showCode = ref(false)
const sourceCode = ref('')
const isDev = import.meta.env.MODE === 'development'

const iconClass = computed(() => {
    return ['iconfont', showCode.value ? 'icon-arrow-up-filling' : 'icon-arrow-down-filling']
})
// 隐藏、显示代码
const showOrhideCode = () => {
    emitter.emit('previewChange', 'ok')
    showCode.value = !showCode.value
}

// 读取文件
const readFile = () => {
	let file = ''
	if (isDev) {
		file = loadFile(`../../packages/components/${props.compName}/doc/${props.demoName}`)
	} else {
		file = await fetch(`/components/${props.compName}/doc/${props.demoName}`).then(res => res.text())
	}
    sourceCode.value = unicodeToUtf8(file)
}
const loadFile = name => {
    const xhr = new XMLHttpRequest()
    const okStatus = document.location.protocol === 'file:' ? 0 : 200
    xhr.open('GET', name, false)
    xhr.overrideMimeType('text/html;charset=utf-8')
    // 默认为utf-8
    xhr.send(null)
    return xhr.status === okStatus ? xhr.responseText : null
}
// unicode转utf-8
const unicodeToUtf8 = data => {
    if (data) {
        data = data.replace(/\\/g, '%')
    }
    return unescape(data)
}

// 复制
const doCopy = () => {
    const textarea = document.createElement('textarea')
    textarea.value = sourceCode.value //将需要复制的内容赋值给input框
    document.body.appendChild(textarea)
    textarea.select() //选中输入框
    document.execCommand('Copy') //复制当前选中文本到前切板
    document.body.removeChild(textarea)
    ElMessage({
        message: '复制成功',
        type: 'success'
    })
}

onMounted(() => {
    readFile()
})
script>

<style lang="scss" scoped>
.slide-fade-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0.5;
}

.pre-code-box {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-top: 0;
    position: relative;
    transition: all 0.15s ease-out;

    &:hover {
        box-shadow: 0px 16px 15px -16px rgb(0 0 0 / 10%);
    }

    pre {
        margin-top: -15px;
        margin-bottom: 0;
    }

    .showCode {
        width: 100%;
        line-height: 40px;
        font-size: 14px;
        text-align: center;
        background: #f9f9f9;
        box-shadow: 0px 16px 15px -16px rgb(0 0 0 / 10%);
        color: #666;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        span {
            margin-left: 10px;
        }
        .tool-wrap {
            &:hover {
                background: #f9f9f9;
                color: #0e80eb;
            }
        }
    }
}
style>

读取 index.wxml 和 index.js件代码

import previewWx from '@/components/previewWx.vue'


<div class="source">
    组件源码index.wxml
</div>
<previewWx compName="LicenseKeyboard" demoName="index.wxml"/>
<br>

<div class="source">
    组件源码index.js
</div>
<previewWx compName="LicenseKeyboard" demoName="index.js"/>
<br>