使用HTML5历史记录模式的vue-cli 3.0多页面设置

Question

vue-cli 3.0提供了一个页面配置来配置多页面模式.

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

我目前正试图让开发服务器使用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同步才能使dev服务器正常运行.

因此,在这种情况下,请将基本标记设置为模板.

<base href="/appname/">

由于这是开发环境的配置,请在生产环境中的托管设置中指定重定向.