vue-cli 3.0 多页面设置 HTML5 历史模式

Question

vue-cli 3.0 提供了 pages config 来配置多页面模式。

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

我目前正在尝试让开发服务器在 HTML5 历史模式下工作，但到目前为止还没有成功。

有没有人已经尝试过这个功能并得到了一个有效的例子？

Answer 1

您需要将devserver的配置添加到vue.config.js。
通过为 historyApiFallback 指定 rewrite，这个问题就解决了。

例如实现多个页面作为索引页面和登录页面

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 时要小心。 document.

中陈述如下

Some values like publicPath and historyApiFallback should not be modified as they need to be synchronized with baseUrl for the dev server to function properly.

因此，在这种情况下，为模板设置一个基本标签。

<base href="/appname/">

由于是开发环境的配置，请在生产环境的hosting设置中指定redirect。

vue-cli 3.0 多页面设置 HTML5 历史模式

vue-cli 3.0 multi page setup with HTML5 history mode

vue.js

vue-cli