Vue.js 如何在同一台服务器中获取网页（在 html 中使用自定义 js，css 和图片）并显示它

Question

首先感谢您的帮助。

我目前正在 vue.js 中与 vuejs-cli 一起写博客，但我遇到了有关我博客架构的问题。

我想做的事情：

我想让我的 vue.js 应用在“ Articles”文件夹，然后用两种方式在vue中显示：

喜欢预览（文章中的图片和文章标题）
通过显示整篇文章

所以我希望文件树看起来像这样：

Root
|
|-dist of my blog
|
|-Articles
    |-Article1
    |    |-index.html
    |    |-style.css
    |    |-script.js
    |    |-img
    |       |-img1.png
    |       |-img2.png
    |
    |-Article2
         |...

我不想每次添加新文章时都重新构建我的应用程序（例如，手动修改路由器）。因为我无法当我为这个博客提供内容时，请执行此操作。
我不想使用 cms 或 markdown

我尝试了什么：

搭建一个api以nodejs为后台的我的博客得到了一篇文章，不过传图好像真的很难。另外，我真的不确定继续这样做是否是个好主意。（此刻，我能够获得 title/description 和 body 文章的 ajax 和我在 nodejs 中的应用程序，但不是图片，样式和脚本）

关于如何实现这一目标，您有任何想法或提示吗？（我不需要代码，我正在寻找实现此目的的方法）

再次感谢您的宝贵帮助！ :)

编辑：

我没试过

将我的文章添加到 the public folder of vue-cli and fetch them in a vue with HTML ifram 中并编写后端程序以向数据库提供 link 这些文章可能是一个很好的解决方案。

此解决方案的三个问题：

构建后我可以在 public 文件夹中 load/modify 文章吗？
构建后 public 文件夹会被清理吗？
从 public 文件夹中的 html 页面获取 image/js 是否与“普通”网站相同？

Answer 1

我终于成功了！

我是这样做的：

我把我的 Article 文件夹放在 vue-cli

public

创建了一个 nodejs 程序 make/update 每 10 分钟 article 文件夹中所有文章的数据库，按创建日期对它们进行排序（我将使用 cron 稍后）
制作这个 nodejs 程序来回答一些 GET 查询：
- 当我想要预览时，程序会发送文章的“预览”（它获取 article 的 html 文件的标题、描述和第一张图片并发送html 格式）
- 当我想要 url 时，程序将 html 页面的 link 发送到 public 文件夹中（查看如何操作 here)
所以在我的 vuejs 应用程序上，视图使用 fetch api 获取到 nodejs 后端的预览并显示它。然后，当用户点击预览时，我的 vue 在指定的 url 处显示 ifram 的网页文章。

提示：请注意 npm build 将删除 Article 的文件夹，如果它只存在于 dist 文件夹中。为避免它，更改 package.json 的脚本以将 --no-clean argument 添加到构建命令

我不知道这是否是一种好的和有效的方法，但它运行良好并且非常容易定制。所以目前，我会那样做:)

Vue.js 如何在同一台服务器中获取网页（在 html 中使用自定义 js，css 和图片）并显示它

Vue.js how to fetch webpage in the same server (in html with custom js, css and pictures) and display it

architecture

blogs

backend

vue.js

vue-router