vue.js - Vue CLI | vue.config.js，如何将资产放在根目录中？

Question

通常，Vue CLIvue.config.js将.js和.css资产放在/dist/[css|js]/. 但是，我想要根文件夹中的.jsand文件。.cssdist

我可以.js使用以下配置获取根文件夹中的文件：

module.exports = {
  productionSourceMap: false,
  filenameHashing: false,
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
  chainWebpack: config => {
    config.externals({
      ...config.get("externals"),
      moment: "moment"
    });

    config.output.filename("[name].js");
  }
};

我该如何处理该.css文件？

Answer 1

这可以通过以下 Vue CLI 配置（来自vuejs/vue-cli#1967）来完成：

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