代码之家  ›  专栏  ›  技术社区  ›  Samson

Vue Cli 3为不同类型的文件生成自定义目录

  •  -1
  • Samson  · 技术社区  · 6 年前

    我在使用vue构建web应用程序方面是新手。 默认情况下,使用 npm run build

    enter image description here

    但我希望建立如下:

    enter image description here

    那么,我该怎么写呢 vue.config.js 就像我想要的那样?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Phil    6 年前

    使用 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