[VUE CLI3] Multi-page devServer jump returned html error problem

problem description

recently attempted to update project scaffolding from vue-cli2 webpack2 to vue/cli 3 webpack4

vue-cli-service serve

indexlogin, window.location.href = "/login" loginindex.htmlindex.js

url localhost:3007/login.htmlurllocalhost: 3007/login/.html

login.htmllogin.js

PS: buildnodejs

the environmental background of the problems and what methods you have tried

related codes

vue.config.js

module.exports = {
  devServer: {
    port: 3007,
    host: "localhost",
    open: true,
    proxy: {
      "/api": {
        target: "localhost: 3333",
        changeOrigin: true,
        // ws: true,
        pathRewrite: {
          "^/api": "/api"
        }
      }
    }
  },
  chainWebpack: config => {
  },
  pages: {
    index: {
      // page 
      entry: "src/main.js",
      // 
      template: "public/index.html",
      //  dist/index.html 
      filename: "index.html",
      //  title 
      // template  title  <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 
      //  chunk  vendor chunk
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    login: {
      entry: "src/login.js",
      template: "public/login.html",
      filename: "login.html",
      title: "",
      chunks: ["chunk-vendors", "chunk-common", "login"]
    },
    // 
    //  `public/subpage.html`
    //  `public/index.html`
    //  `subpage.html`
    // subpage: "src/subpage/main.js"
  },
}

what result do you expect? What is the error message actually seen?

module.exports = { devServer: { port: 3007, host: 'localhost', open: true, historyApiFallback: { rewrites: [ { from: /^\/login/, to: '/login.html' }, ] }, proxy: { '/api': { target: 'localhost: 3333', changeOrigin: true, // ws: true, pathRewrite: { '^/api': '/api' } } } }, chainWebpack: config => { }, pages: { index: { // page entry: 'src/main.js', // template: 'public/index.html', // dist/index.html filename: 'index.html', // title // template title <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // // chunk vendor chunk chunks: ['chunk-vendors', 'chunk-common', 'index'] }, login: { entry: 'src/login.js', template: 'public/login.html', filename: 'login.html', title: '', chunks: ['chunk-vendors', 'chunk-common', 'login'] }, // // `public/subpage.html` // `public/index.html` // `subpage.html` // subpage: 'src/subpage.js' }, }