Skip to content

@vue/cli3 中多页面启动路径的问题  #4

@jaskang

Description

@jaskang

前几天遇到收到一个问题
背景:需求是要在服务器运行开发模式(npm run serve)
而服务器nginx配置给到的代理是 http://xxxx/a/b/c(这部分路径不能修改) -> 127.0.0.1:8585
我们项目提供的是个多页面应用 对应的地址应该是 http://xxxx/a/b/c/ZZZhttp://xxxx/a/b/c/XXX

问题表现: npm run serve 启动后总是不能访问到资源 或者 页面 (已经配置了publicPath).

原因:vue/cli3 中 serve 模式DevServer 启动后 针对多页面采用了 historyApiFallback -> rewrites 来实现
而其中定义的 rewrites from 属性 只是取了pages配置的name
导致无法匹配路由

function genHistoryApiFallbackRewrites (baseUrl, pages = {}) {
  const path = require('path')
  const multiPageRewrites = Object
    .keys(pages)
    // sort by length in reversed order to avoid overrides
    // eg. 'page11' should appear in front of 'page1'
    .sort((a, b) => b.length - a.length)
    .map(name => ({
      from: new RegExp(`^/${name}`),
      to: path.posix.join(baseUrl, pages[name].filename || `${name}.html`)
    }))
  return [
    ...multiPageRewrites,
    { from: /./, to: path.posix.join(baseUrl, 'index.html') }
  ]
}

https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/serve.js

Metadata

Metadata

Assignees

No one assigned

    Labels

    FEjavascript html css

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions