vueJS + webpack：导入字体、CSS 和 node_modules

Question

我从 Vue.js 和 Webpack 开始，我对如何正确导入和引用我的字体、CSS 和 node_modules 有一些疑问。

我使用vue-cli 启动我的应用程序，结果结构如下：

build
config
node_modules
src
--assets
--components
--router
static

这是我的webpack.base.conf 文件：

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

首先，放置自定义 CSS 和图像的正确位置在哪里？我目前将它们分别放在assets/css 和assets/img 中（我创建了这些文件夹）。对吗？

我还有一些来自外部库（例如 Bootstrap 和 Font Awesome）的 CSS 和字体，我通过 NPM 安装了这些库。它们位于node_modules。

如果我没记错的话，Webpack 会转换并将这些文件复制到另一个位置。如何在我的 Vue 文件和 CSS 文件中引用它们？

使用import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css' 有效（至少在生产中），但我应该使用其他路径吗？

在我的自定义 CSS 文件中，我使用以下方法从外部库中引用了一些字体：

src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot')

代码可以编译，但是当我在浏览器中打开页面时，在搜索这些字体时收到 404 错误。我应该如何在我的自定义 CSS 中引用这些字体？

Answer 1

首先，放置自定义 CSS 和图像的正确位置在哪里？我目前将它们分别放在 assets/css 和 assets/img 中（我创建了这些文件夹）。对吗？

这是一个主观问题，但简短的回答是肯定的。 cli 工具已经为你创建了这个，在 Webpack 配置文件中定义了一些东西，为什么不使用它呢？

使用 import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css' 有效（至少在生产中），但我应该使用其他路径吗？

Webpack 将 css 嵌入到它的 JS 文件中，所以如果你不导入它，Webpack 将不会知道它。 这是一个动态加载图像的示例

    <ul id="albums">
    <li v-for="album in albums">
        <img :src="LoadImage(album.data.imagefile)" />
    </li>
</ul>

如果您只是将 src 绑定到艺术品文件，它将无法加载它，因此我们将图像文件名交给类似这样的方法

LoadImage(filename) {
        const image = require('@/assets/img/' + filename)
        return image
    }

现在在方法中，我们从 assets 文件夹加载图像（使用在 resolve.alias 下的 webpack.base.conf 文件中配置的 @ 表示法）

所以是的，使用 import/require 函数是 Webpack 了解您的文件的方式。

在我的自定义 css 文件中，我使用以下方法从外部库中引用了一些字体：

src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot') 代码可以编译，但是当我在浏览器中打开页面时，在搜索这些字体时收到 404 错误。我应该如何在我的自定义 CSS 中引用这些字体？

最好将 dist 文件夹中的所有内容复制到 src 文件夹中。我不太确定，从未尝试过，但是查看 webpack.prod.conf 文件，它看起来只会从 src/assets 文件夹中复制文件。 关于字体不加载，这有点不同，因为 url-loader 将处理文件，所以你必须从浏览器的角度考虑它，并像 url 路径一样引用它。 这是我的一个组件中的一个东西

@font-face {
  font-family: BebasNeue;
  src: url('./assets/fonts/BebasNeue.otf');
}

看看我是如何不使用 @ 符号从 src 文件夹中引用它的？不需要网址。

我猜您已经回答了这个问题，如果没有，希望对您有所帮助！ 您可以在这里http://chat.vuejs.org/ 提问，并从社区和核心团队那里获得答案。

Answer 2

快速解决方案 我做了什么评论 @font-face {} 部分并构建并添加自定义 css 到样式文件