3

У меня есть один лэндинг на 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$/) -- то получаю ошибку:

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Можно ли сделать это при помощи этого лоадера? Если нельзя, то какой использовать?

1 ответ 1

1

В конфиге webpack'а должно быть правило такого вида:

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

Либо, можно попробовать импортировать так:

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

Добавление !! указывает вебпаку игнорировать правила в его конфиге.

3
  • Как я ни бился -- всё равно через vue.config.js не получилось пока. Но вот за !!raw-loader! плюс и галка. Главное -- я понимаю теперь, что raw-loader -- работает и дело только в конфигурациях, с которыми нужно разобраться где и как конфигурируется.
    – A K
    30 ноя 2019 в 18:36
  • @AK, Конфигурить вебпак - это вообще боль. Если при добавлении правила все равно не работает, то может помочь свойство enforce правила (инлайновый префикс !! как раз с этим свойством связан). Вот ман: webpack.js.org/configuration/module/#ruleenforce
    – yar85
    30 ноя 2019 в 18:42
  • @AK, ...еще, как альтернативный вариант (по-моему, он даже лучше подходит в данной ситуации) - это завести все правила для html в массив oneOf, тогда будет использоваться только первое совпавшее: webpack.js.org/configuration/module/#ruleoneof
    – yar85
    30 ноя 2019 в 18:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.