如何使用 vue-cli-service build 命令复制资产？

【问题标题】：How to copy assets with vue-cli-service build command?如何使用 vue-cli-service build 命令复制资产？
【发布时间】：2020-02-19 15:44:39
【问题描述】：

以下是我的应用程序src 目录的内容。如何使用vue-cli-service build 命令将src/assets/others 中的文件复制到dist/others 文件夹？顺便提一句。我的项目是使用vue create 命令创建的。

    src/
    ├── App.vue
    ├── assets
    |    ├── others
    |        └── metadata.xlsx
    dist/
    ├── css
    │   ├── app.4d032e62.css
    │   └── chunk-vendors.f6f30965.css
    ├── favicon.ico
    ├── img
    │   └── upload.a0fd70ac.svg
    ├── index.html
    └── js
        ├── app.11cd5b00.js
        ├── app.11cd5b00.js.map
        ├── chunk-vendors.58c6929b.js
        └── chunk-vendors.58c6929b.js.map

【问题讨论】：

标签： vue.js vuejs2 vue-cli

【解决方案1】：

在 Vue CLI 项目中，src/assets 目录通常包含由 Webpack 处理的文件（用于缩小等），static assets 存储在public 目录中。因此，您可以将您的 src/assets/others 移动到 public/others，在构建期间它们会自动复制到 dist。

另一方面，如果您出于某种原因希望 src/assets 目录也包含静态资产，您可以在构建时将 configure the WebpackCopyPlugin（已包含在 Vue CLI 中）复制 src/assets/others 到 dist/others ：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.plugin('copy')
          .tap(args => {
            args[0].push({
              from: path.resolve(__dirname, 'src/assets/others'),
              to: path.resolve(__dirname, 'dist/others'),
              toType: 'dir',
              ignore: ['.DS_Store']
            })
            return args
          })
  }
}

【讨论】：