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

- felipeecst

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
    }

现在，在方法中我们从资产文件夹加载图像（使用在“webpack.base.conf”文件的resolve.alias下配置的@符号）。

是的，使用import/require函数是Webpack识别文件的方式。

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

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

最好将您想要的所有内容复制到src文件夹中的dist文件夹中。我不太确定，从未尝试过，但查看“webpack.prod.conf”文件，它似乎只会复制来自src/assets文件夹的文件。 关于字体无法加载，这有点不同，因为url-loader会处理文件，因此您必须从浏览器视角考虑，并像URL路径一样引用它。 这是我在其中一个组件中拥有的东西。

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

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

我猜你可能已经回答了这个问题，如果没有，希望这能帮到你！你可以在 http://chat.vuejs.org/ 这里提问并获得来自社区和核心团队的答案。

- doubleorseven

Answer 2

快速解决方案 我注释掉了@font-face {}部分，并在样式文件中构建并添加了自定义CSS。

- Ajit Bhandari