在生产构建中更改 js 和 css 文件的文件路径

Question

我需要一些帮助，或者至少需要指出正确的方向。我正在尝试使用 Vue CLI 3 部署一个 vuejs 应用程序。当我运行构建命令时，文件被构建到 dist 文件夹中，它工作正常。 dist 中还有一个 js 和 css 文件夹，其中包含相应的文件。在我的 index.html 中，路径被创建为 /css/app.css 或 /js/app.js。我希望将文件与 index.html 以及简单读取 app.css 或 app.js 的路径一起放在 dist 文件夹中。我的目标是删除 /css/。

我假设这是通过配置 webpack 在 vue.config.js 中完成的。我似乎无法弄清楚这一点。我了解 baseURL 设置，但我可以弄清楚这部分。任何帮助将不胜感激。

谢谢

Answer 1

这里有答案 https://github.com/vuejs/vue-cli/issues/1967

基本上配置应该是这样的

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