命令行界面 | vue.config.js, 如何将资源放在根目录中？

Question

通常，带有 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 文件执行此操作？

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',
    }
  }
}

命令行界面 | vue.config.js, 如何将资源放在根目录中？

Vue CLI | vue.config.js, how to place assets in root dist?

vue.js

vue-cli

vue-cli-4