VUE前端代码中读取文件中的代码进行展示

需求：展示项目中前端项目中一些代码到页面中展示。

一开始想着用require.context获取文件内容，然后用code渲染，require后的文件是经过编译的，所以，想到用nodejs读取文件，然后把文件内容放到环境变量中，这样在VUE代码中就可以取环境变量而获取文件内容了。

文件名：getfiles.js

'use strict'
const path = require('path')
var fs = require("fs");
const fileDatas = {};
const pathName = path.resolve(__dirname, './src/common/commonJs');
function getFilesByDir(pathName) {
    const files = fs.readdirSync(pathName);
    for(var i = 0;i < files.length;i ++){
        const file = fs.statSync(path.join(pathName, files[i]))
        if(file.isFile()){
            const fileData = fs.readFileSync(path.join(pathName, files[i]), 'utf-8')
            fileDatas[files[i]] = fileData
        }else if(file.isDirectory()){
            getFilesByDir(path.join(pathName, files[i]))
        }
      }
}
getFilesByDir(pathName);
module.exports = fileDatas;
  

文件：vue.config.js

const fileData = require('./getfiles');
process.env.VUE_APP_COMMON_JS = JSON.stringify(fileData);

使用：vue文件

mounted() {
      this.urlData = JSON.parse(process.env.VUE_APP_COMMON_JS);
        //代码展示用的hhighlight.js
        hljs.highlightAll();
    }

这样就可以了。

代码其实不重要，重要的是很多事情，并不是一定要在项目代码中搞，其实webpack或者vite能帮我们提供另外一种思路去实现。