如何配置vue.config.js 处理static文件夹下的静态文件

下面是如何配置vue.config.js处理static文件夹下静态文件的完整攻略。

首先，需要明确一下vue-cli会默认将static文件夹里的文件拷贝到打包后的根目录中，并不会对其进行任何处理，因此我们需要配置vue.config.js来处理这些静态文件。

以下是配置过程：

步骤一：创建vue.config.js文件

在项目根目录下创建vue.config.js文件，并在其中添加以下代码：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static'
};

这里的assetsDir字段就是告诉webpack把static文件夹下的静态资源打包到dist/static目录中。

步骤二：配置loader

我们可以通过chainWebpack来配置loader，也可以通过configureWebpack来配置，这里我们选择后者，修改vue.config.js文件如下：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // 配置loader
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'img/[name].[hash:7].[ext]'
            }
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'media/[name].[hash:7].[ext]'
            }
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'fonts/[name].[hash:7].[ext]'
            }
          }
        }
      ]
    }
  }
};

这里的module.rules就是webpack中对loader的配置。例如，我们用到了url-loader加载器。

示例一：处理图片

比如我们有一个banner.png的图片，存放在static/images目录下，现在我们想要在页面上引用这张图片，可以这样写：

<template>
  <div>
    <img src="~@/static/images/banner.png" alt="banner" />
  </div>
</template>

在vue中引入图片可以使用@/或者~@/，也可以直接使用相对路径。这里需要注意的是，在src属性中需要加上~@前缀，告诉webpack这是在引用static文件夹下的资源。

示例二：处理字体文件

同理，如果我们有一个字体文件iconfont.ttf，存放在static/fonts目录下，想要在页面中引用，可以这样写：

@font-face {
  font-family: 'iconfont';
  src: url('~@/static/fonts/iconfont.ttf') format('truetype');
}

同样地，需要在url中加上~@前缀。

以上就是如何配置vue.config.js处理static文件夹下静态文件的完整攻略，希望能对您有所帮助。