vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "./dist",
  publicPath: ".",
  assetsDir: './static' + (new Date()).getTime(),

  chainWebpack: (config) => {
    // 默认vue-loader配置保持不变，用于正常处理.vue文件
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end();

    // 新增一个规则，专门用于处理带有特定查询参数的.vue文件
    config.module
      .rule('raw-vue')
      .test(/\.vue$/)
      .resourceQuery(/raw/)
      .use('raw-loader')
      .loader('raw-loader')
      .end();
  },
})

<template>
  <div>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" title="代码" append-to-body width="1200px">
      <pre>{{ codeStr }}</pre>
    </el-dialog>
  </div>
</template>

<script>
import xysComponentList from "@/components/xys-components-lib/xysComponentList";


let codeStrMap = {};
const setCodeStrMapVal = (componentName) => {
  codeStrMap[componentName] = require(`!!raw-loader!../../../components/xys-components-lib/c/${componentName}/${componentName}.vue`).default
  codeStrMap[componentName + 'Example'] = require(`!!raw-loader!../../../components/xys-components-lib/c/${componentName}/${componentName + 'Example'}.vue`).default
}
xysComponentList.forEach(item => {
  let componentName = item.componentName
  setCodeStrMapVal(componentName)
})
export default {
  name: 'DialogSeeCode',
  data() {
    return {
      dialogVisible: false,
      codeStr: '',
    }
  },
  mounted() {
  },
  methods: {
    start({componentName}) {
      console.log(componentName)
      this.dialogVisible = true;
      this.codeStr = codeStrMap[componentName]
    }
  }
}
</script>

<style lang="scss" scoped>
</style>