具有HTML5历史模式的vue-cli3.0多页设置

Question

vue-cli 3.0提供了配置多页模式的页面配置。

https://cli.vuejs.org/config/#pages

我目前正在尝试让dev服务器使用HTML5历史模式，但到目前为止还没有成功。

有没有人尝试过这个特性，并得到了一个有用的例子？

Answer 1

您需要将devserver的配置添加到vue.config.js。

通过为historyApiFallback指定重写，解决了这个问题。

将多个页面实现为索引页和登录页

vue.config.js：

module.exports = {
  pages: {
    index: {
      entry: 'src/entry-point/index/main.js', //entry for the public page
      template: 'public/index.html', // source template
      filename: 'index.html' // output as dist/*
    },
    signin: {
      entry: 'src/entry-point/signin/main.js',
      template: 'public/signin.html',
      filename: 'signin.html'
    }
  },
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /\/index/, to: '/index.html' },
        { from: /\/signin/, to: '/signin.html' }
      ]
    }
  }
}

为了应用上述设置，您需要运行vue inspect**，，请小心。**

此外，当baseUrl被指定为时，要小心。以下内容在文档中作了说明。

某些值(如publicPath和historyApiFallback )不应修改，因为它们需要与baseUrl同步，才能使开发服务器正常工作。

因此，在这种情况下，将基标记设置为模板。

<base href="/appname/">

由于这是开发环境的配置，请在生产环境中的宿主设置中指定重定向。