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

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

我开始使用我的应用程序vue-cli，这是最终的结构：

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

这是我的webpack.base.conf file:

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 and assets/img，分别（我创建了这些文件夹）。这是对的吗？

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

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

Using 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 中引用这些字体？

首先，放置自定义 css 和图像的正确位置在哪里？我目前将它们分别放入 asset/css 和 asset/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
    }

现在在方法中，我们从资产文件夹加载图像（使用在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/ http://chat.vuejs.org/并从社区和核心团队获得答案。