Vue Cli 3 为不同类型的文件构建自定义目录答案

【问题标题】：Vue Cli 3 build custom directory for different type of filesVue Cli 3 为不同类型的文件构建自定义目录
【发布时间】：2019-02-11 06:25:33
【问题描述】：

我是使用 vue 构建网络应用程序的新手。默认使用npm run build，它会构建如下结构：

但我希望构建如下：

那么，我怎样才能将vue.config.js 写成我想要的输出呢？

【问题讨论】：

来源中的图像在哪里？如果它们在您的public 目录中，只需在其中为它们创建一个register 目录。至于你的 CSS 和 JS 文件，为什么重要？
这是内置在dist 文件夹中。就是因为服务器结构，应该是这样输出的。
是的，我知道那是您的dist 文件夹，但我问您您来源中的图像在哪里？
另外，“这是因为服务器结构” 没有多大意义。你能详细说明一下吗？
'css' 更改为 'css/register'，'img' 更改为 'images/register' 和 'js' 更改为 'js/register'。这是因为我们使用的是带有 php 框架的旧 apache 服务器。

标签： vue.js npm webpack vue-cli-3

【解决方案1】：

使用this GitHub issue as an example，您应该能够通过在您的配置中添加类似这样的内容来实现这一点...

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('images').use('url-loader')
      .loader('file-loader') // replaces the url-loader
      .tap(options => Object.assign(options, {
        name: 'images/register/[name].[hash:8].[ext]'
      }))
    config.module.rule('svg').use('file-loader')
      .tap(options => Object.assign(options, {
        name: 'images/register/[name].[hash:8].[ext]'
      }))
  },
  css: {
    extract: {
      filename: 'css/register/[name].[hash:8].css',
      chunkFilename: 'css/register/[name].[hash:8].css'
    }
  },
  configureWebpack: {
    output: {
      filename: 'js/register/[name].[hash:8].js',
      chunkFilename: 'js/register/[name].[hash:8].js'
    }
  }
}

有关更多信息和示例，请参阅https://cli.vuejs.org/config/#vue-config-js。

【讨论】：