vue-cli 如何实现在 build 时执行 nodejs 代码以更改文件？

Question

问题描述

我使用 vue3 和 vue-cli 开发项目，需要渲染 markdown 文件，而渲染器的默认渲染效果不理想，所以我打算使用 js 代码对渲染结果进行自定义。

我所期望的结果

这段代码在 build 时执行，输出到 dist 里面的是已经自定义好了的代码。

实际的结果

这部分代码会被 vue-cli 当成普通 js，原封不动地 build 进了 dist/js 目录里面，导致用户每次访问页面都会执行这一段代码，影响体验。

例子

例如，默认渲染出来的图片元素是这样的：

<p><img src="http://www.lenna.org/len_std.jpg" alt="Lena" title="Lena"></p>

我通过某函数（姑且称之为 imgReplace() 吧）将其改成这样：

<p><img src="http://www.lenna.org/len_std.jpg" alt="Lena" title="Lena" class="someClasses"><span class="title"><span>Lena</span></span></p>

我希望输出到 dist 的是后者，而不是前者；同时我不希望 imgReplace() 出现在 dist 中。

我的错误做法

我在 src/plugins 里面创建了一个 process.js 文件，export 片段如下：

function process(html) {
    html = imgReplace(html);
    // ...
    return html;
}

export default {
    install: (app) => {
        app.config.globalProperties.$process = process;
    },
};

我在 xxx.vue 文件中的 mounted() 函数中加了以下片段：

let mdContent = require("xxx.md"); // 这是渲染器渲染出来的 html
this.$data.content = this.$process(mdContent);

然后就出现了前文提及的问题。

Answer 1

看你的描述，需求时修改静态文件。
新建文件process.js

const fs = require('fs')
function process(html) {
    html = imgReplace(html);
    // ...
    return html;
}
const content = fs.readFileSync("xxx.md")
fs.writeSync("xxx.md", process(content))

然后修改build 脚本
npm run build ->
npm run build && node ./process.js
这样就与vue无关了。

以上是伪代码，使用时注意编码问题