需求:展示项目中前端项目中一些代码到页面中展示。
一开始想着用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能帮我们提供另外一种思路去实现。