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

Question

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

我假设这是在 vue.config.js 中通过配置 webpack 完成的。我似乎无法弄清楚这一点。我了解 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',
    }
  }
};

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

Changing file path of js and css files in production build

webpack

vue.js

vuejs2

vue-cli

vue-cli-3