时间戳

首页 > 解决方案 > 如何为包中生成的文件设置静态名称？

vue.js - 如何为包中生成的文件设置静态名称？

问题描述

我正在使用 Vue CLI 开发 MPA 应用程序，当我制作捆绑包时，Webpack 会自动生成文件。输出文件列表是这样的：

chunk-vendors.7f809fbd.js
chunk-common.aae8cb13.js
home.f85a21ab.js
chunk-common.9113b70b.css
etc...

是否可以手动定义这些生成文件的名称？我想要这样的文件名：

chunk-vendors.my-standard.js
chunk-common.my-standard.js
home.my-standard.js
chunk-common.my-standard.css

标签： vue.jswebpackbundlevue-cli

解决方案

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

// vue.config.js
const chunkPrefix = '[name].my-standard'

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

推荐阅读