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

Question

以下是我的应用程序src目录的内容。如何使用命令将位于文件夹中的文件复制src/assets/others到dist/others文件夹中vue-cli-service build？顺便提一句。我的项目是用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

Answer 1

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

另一方面，如果您src/assets出于某种原因希望目录也包含静态资产，您可以配置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
          })
  }
}