vue.config.js迁移至quasar.config.js后index.html未生成的问题排查

我想在Quasar项目中实现原vue.config.js里的配置（如下），核心需求是通过writeToDisk让开发环境生成index.html文件到指定路径。我已经更新了quasar.conf.js，但index.html并没有生成，想问问是不是漏了配置或者有注意事项。

原vue.config.js配置 #

module.exports = {
    publicPath:
      process.env.NODE_ENV === "production"
        ? "/static/dist/"
        : "http://127.0.0.1:8080",
    outputDir: "../../static/dist",
    indexPath: "../../../templates/index.html",
    pages: {
      index: {
        entry: "src/main.js",
        title: "QuestionTime",
      },
    },
    devServer: {
      devMiddleware: {
        publicPath: "http://127.0.0.1:8080",
        writeToDisk: (filePath) => filePath.endsWith("index.html"),
      },
      hot: "only",
      headers: { "Access-Control-Allow-Origin": "*" },
    },
  };

当前quasar.conf.js配置 #

module.exports = configure(function (ctx) {
  return {
    publicPath:
      process.env.NODE_ENV === "production"
        ? "/static/dist/"
        : "http://127.0.0.1:8080",
    outputDir: "../../../static/dist",
    indexPath: "../../../templates/index.html",
    pages: {
      index: {
        entry: "src/main.js",
        title: "QuestionTime",
      },
    },
    // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
    supportTS: false,

    // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-webpack/boot-files
    boot: [
      
      'axios',
    ],

    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
    css: [
      'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      // 'fontawesome-v6',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons', // optional, you are not bound to it
    ],

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      // transpile: false,
      // publicPath: '/',

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: true, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
      
      chainWebpack (chain) {
        chain.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
      }
      
    },
  };

使用版本 #

• quasar v2.9.2
• @quasar/app-webpack v3.6.1
• webpack v5

解决要点 #

1. 添加devServer配置节点
   Quasar的devServer配置不在build字段下，而是作为根级配置项存在。你当前的quasar.conf.js里完全缺少了devServer字段，这是writeToDisk不生效的核心原因。需要在返回的配置对象中添加对应配置：

   module.exports = configure(function (ctx) {
     return {
       // 原有配置...
       devServer: {
         devMiddleware: {
           publicPath: "http://127.0.0.1:8080",
           writeToDisk: (filePath) => filePath.endsWith("index.html"),
         },
         hot: "only",
         headers: { "Access-Control-Allow-Origin": "*" },
       },
       // 原有配置...
     }
   })
   

2. 校验路径一致性
   原vue.config.js的outputDir是../../static/dist，但你当前quasar.conf.js里写的是../../../static/dist，路径层级多了一级。要根据你的项目目录结构确认正确路径，否则文件会生成到错误位置，导致你误以为没生成。

3. 重启开发服务
   修改配置后必须重启quasar dev，否则新配置不会生效。重启后检查indexPath指定的../../../templates/index.html路径下是否生成了文件。

内容的提问来源于stack exchange，提问作者expatcz