前几天遇到收到一个问题
背景:需求是要在服务器运行开发模式(npm run serve)
而服务器nginx配置给到的代理是 http://xxxx/a/b/c(这部分路径不能修改) -> 127.0.0.1:8585
我们项目提供的是个多页面应用 对应的地址应该是 http://xxxx/a/b/c/ZZZ 和 http://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
前几天遇到收到一个问题
背景:需求是要在服务器运行开发模式(npm run serve)
而服务器nginx配置给到的代理是 http://xxxx/a/b/c(这部分路径不能修改) -> 127.0.0.1:8585
我们项目提供的是个多页面应用 对应的地址应该是 http://xxxx/a/b/c/ZZZ 和 http://xxxx/a/b/c/XXX
问题表现: npm run serve 启动后总是不能访问到资源 或者 页面 (已经配置了publicPath).
原因:vue/cli3 中 serve 模式DevServer 启动后 针对多页面采用了 historyApiFallback -> rewrites 来实现
而其中定义的 rewrites from 属性 只是取了pages配置的name
导致无法匹配路由
https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/serve.js