Vue.js如何在同一服务器中获取网页(使用自定义js、css和图片的html)并显示它

首先，感谢您的帮助。

我目前正在用vuejs-cli在vue.js中写一篇博客，但我的博客架构存在问题。

我想做的事情：

我想让我的vue.js应用程序在"文章"；文件夹，然后以两种方式在vue中显示：

类似预览(文章和文章标题中的图像(
通过浸渍整篇文章

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

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

我不想每次添加新文章时都重新构建我的应用程序(例如，手动修改路由器(因为当我为这个博客提供信息时，我将无法做到这一点
我不想使用cms或降价

我尝试了什么：

用nodejs作为我博客的后端构建一个api来获取文章，但传输图片似乎真的很困难。此外，我真的不确定这样做是否是个好主意。(现在，我可以在nodejs中使用ajax和我的应用程序获得文章的标题/描述和正文，但不能获得图片、样式和脚本(

关于如何实现这一点，你有什么想法或技巧吗？(我不想要代码，我正在寻找实现这一点的方法(

再次感谢您的宝贵帮助！：(

编辑：

我没有尝试

也许这是一个很好的解决方案，可以将我的文章添加到vue-cli的公共文件夹中，并在带有HTMLifram的vue中获取它们，并通过数据库编程后端来提供这些文章的链接。

此解决方案的三个问题：

生成后，我可以加载/修改公用文件夹中的项目吗
生成后会清理公用文件夹吗
从公共文件夹中的html页面获取图像/js与"；正常的"；网站

我终于成功了！

我就是这样做的：

我把我的Article文件夹放在vue-cli的public文件夹中
创建了一个nodejs程序，每10分钟生成/更新一个article文件夹中所有文章的数据库，并按创建日期对其进行排序(稍后我将使用cron进行cron作业(
制作了这个nodejs程序来回答一些GET查询：
- 当我想要预览时，程序会发送一个"；预览"；文章的标题、描述和article的html文件的第一个图像，并以html格式发送(
- 当我想要一个url时，程序会将html页面的链接发送到public文件夹中(请参阅此处的操作方法(
因此，在我的vuejs应用程序上，视图使用fetchapi向nodejs后端获取预览并显示它。然后，当用户点击预览时，我的vue在指定的提取url处显示网页文章的ifram

提示：请注意，如果npm build的文件夹仅存在于dist文件夹中，则它将擦除Article的文件夹。为了避免这种情况，请更改package.json的脚本，将--no-clean参数添加到构建命令中

我不知道这是否是一种既好又高效的方法，但它运行良好，而且可以很容易地定制。所以现在，我会这样做：(

相关内容

最新更新

热门标签：