主页 / 问题 / 1052454
Accepted
A K
Asked:2020-11-30 06:50:30 +0000 UTC2020-11-30 06:50:30 +0000 UTC

将html从文件加载到vue模板变量中

  • 772

我有一个 vue.js 登陆页面已经被掀起。在这个网站上，我没有也不期望有一个数据库，但事实证明有必要放置几篇文章。

原则上，我出来了：我把文章文件放在assets文件夹中，读入一个变量，稍后输出。

在这个方案中什么不适合我以及我想随着时间的推移重做什么：文件扩展名。现在是txt，但我想要一个html扩展名——这样我就可以在vscode中随时按ctrl + alt + F并重新格式化文档（txt中没有这样的东西）。而且我不明白为什么 raw-loader 仅在文件扩展名为 txt 时才有效。

我按照这个答案做了（我也有 vue-cli 3）。

有一个 data.js 文件：

import text1 from "@/assets/blog/1.article.txt";
import desc1 from "@/assets/blog/1.description.txt";

const data = {
  1: {
    id: 1,
    title: "tite1asdf",
    date: new Date(2008, 2, 28),
    text: text1,
    description: desc1
  }
};

export default data;

并按照答案创建了 vue.config.js 。

我在组件中输出：

<div v-html="this.articles[this.id].text"></div>

但是，当我尝试将文件重命名为 html 并将扩展名搜索替换为.test(/\.html$/)-- 时，我得到一个错误：

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见 https://webpack.js.org/concepts#loaders

这可以用这个装载机完成吗？如果不是，应该使用哪一个？

javascript

1 个回答

  1. Best Answer

    webpack 配置应该有这样的规则：

    rules: [
  {
    test: /\/assets\/blog\/.*\.html$/i,
    use: 'raw-loader',
  },
  // ... 
],

    或者，您可以尝试像这样导入：

    import text1 from '!!raw-loader!@/assets/blog/1.article.html';

    添加!!告诉 webpack 忽略其配置中的规则。

    • 1

相关问题