在 Vue CLI 构建输出中注入 css 链接答案

【问题标题】：Injecting css link in Vue CLI build output在 Vue CLI 构建输出中注入 css 链接
【发布时间】：2020-02-12 21:00:15
【问题描述】：

所以这是一个在 Laravel 中使用 Vue+Vuetify 前端的项目。我正在使用 Vue CLI。我已经使用vue.config.js 将 Vue CLI 的输出目录设置为 Laravel 的公用文件夹，如下所示：

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 每次都会被构建过程覆盖。

替代路径是通过安装 npm 包并在我的main.js 中添加几行来将该 css 文件包含在构建过程中，但我宁愿避免这种情况，因为我的输出已经变得越来越大。

【问题讨论】：

标签： vue.js vue-cli

【解决方案1】：

发布问题后不久就想通了。我会把它贴在这里作为我自己的记录和其他登陆这里的人。

解决方案比我预期的要简单。 Vue CLI 使用 /public 文件夹的内容来生成构建输出。所以解决方案是直接去public/index.html 并把元标记放在那里。

注意：在我的例子中，我创建了一个 Laravel 项目，然后使用 Vue CLI 在 Laravel 项目文件夹中创建了一个 Vue 项目，所以我的文件夹结构如下所示：

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

注意有两个public 文件夹：第一个在 Laravel 项目的根目录中，而第二个在 Vue 项目的目录中。我们在这里讨论第二个。

【讨论】：