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

Posted 2023-02-22

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

【英文标题】：Changing file path of js and css files in production build

【发布时间】：2019-02-17 16:57:11

【问题描述】：

我需要一些帮助，或者至少需要指出正确的方向。我正在尝试使用 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 设置，但我可以弄清楚这部分。任何帮助将不胜感激。

谢谢

【参考方案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',
    
  
;

【讨论】：

这似乎可行，唯一的问题是它给了我 /app.js，我需要让 app.js 没有斜线出现在 HTML 中。我将其部署为 websphere 门户中的 portlet，这是它正常工作的唯一方法。

我在 configureWebpack 下的输出对象中添加了 publicPath:'' 并解决了问题