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

【问题标题】：Vue CLI | vue.config.js, how to place assets in root dist?Vue CLI | vue.config.js，如何将资产放在根目录中？
【发布时间】：2020-04-22 22:42:13
【问题描述】：

通常，带有 vue.config.js 的 Vue CLI 会将 .js 和 .css 资产放在 /dist/[css|js]/ 中。但是，我想要 dist 根文件夹中的 .js 和 .css 文件。

我可以使用以下配置在根文件夹中获取.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 文件执行此操作？

【问题讨论】：

标签： vue.js vue-cli vue-cli-4

【解决方案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',
    }
  }
}

【讨论】：