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

Posted 2023-02-22

【中文标题】具有 HTML5 历史模式的 vue-cli 3.0 多页面设置

【英文标题】：vue-cli 3.0 multi page setup with HTML5 history mode

【发布时间】：2018-11-24 05:29:22

【问题描述】：

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

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

我目前正在尝试让开发服务器使用 html5 历史记录模式，但到目前为止没有运气。

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

【参考方案1】：

需要在 vue.config.js 中添加 devserver 的配置。 通过为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中说明。

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

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

<base href="/appname/">

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

【讨论】：

您能否提供一个示例，说明如何将其设置为生产环境？我尝试使用“connect-hostory-api-fallback”包的重写选项，但页面重定向时找不到资产（js 和 css）