Внедрение ссылки CSS в выходные данные сборки Vue CLI - PullRequest
Новая
       32

Внедрение ссылки CSS в выходные данные сборки Vue CLI

0 голосов
/ 16 октября 2019

Так что это проект в Laravel с интерфейсом Vue + Vuetify. Я использую Vue CLI. Я установил выходной каталог Vue CLI в общую папку Laravel, используя vue.config.js, например: 

module.exports = {
    configureWebpack: {
      devtool: 'source-map'
    },
    devServer: {
      proxy: 'http://localhost:8080/api/v1/',
  },
  outputDir: '../public',

  indexPath: '../resources/views/index.blade.php',
}

Это работает. Однако значки mdi на веб-странице не отображаются. Я понимаю, что мне нужно добавить тег ссылки <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> в индексный файл, но я не знаю, куда его добавить. index.blade.php перезаписывается процессом сборки каждый раз.

Альтернативный путь - включить этот файл css в процесс сборки, установив пакет npm и добавив несколько строк в мой main.js, но я быскорее избегайте этого, так как мой вывод уже увеличивается.

1 Ответ

0 голосов
/ 16 октября 2019

разобрался вскоре после публикации вопроса. Я опубликую это здесь для моей собственной записи и для любого другого приземляющегося здесь.

Решение оказалось проще, чем я ожидал. Vue CLI использует содержимое папки /public для генерации результатов сборки. Поэтому решение было просто перейти к public/index.html и поместить туда метатег.

Примечание. В моем случае я создал проект Laravel, а затем использовал Vue CLI для создания проекта Vue в папке проекта Laravel,поэтому моя структура папок выглядела так: 

Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public

Обратите внимание, что есть две папки public: первая находится в корневом каталоге проекта Laravel, а вторая - в каталоге проекта Vue. Мы говорим о втором здесь.

...