找到方法了
既然是开发环境配置，估计和devServer有关，查看了webpack4官网关于devServer的部分，找到了devServer.historyApiFallback
看到了这部分
module.exports = {
//...
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
}
};
恍然大悟，对于特定路由，可以指定静态资源。
所以把vue.config.js 改为了如下
module.exports = {
devServer: {
port: 3007,
host: 'localhost',
open: true,
historyApiFallback: {
rewrites: [
{ from: /^\/login/, to: '/login.html' },
]
},
proxy: {
'/api': {
target: 'localhost: 3333',
changeOrigin: true,
// ws: true,
pathRewrite: {
'^/api': '/api'
}
}
}
},
chainWebpack: config => {
},
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
login: {
entry: 'src/login.js',
template: 'public/login.html',
filename: 'login.html',
title: '登陆',
chunks: ['chunk-vendors', 'chunk-common', 'login']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
// subpage: 'src/subpage.js'
},
}
这样当我 window.location.href = '/login'时，匹配到login,静态资源就会返回login.html, 而且 若login页面若有多个路由时，login/route1或login/route2也会正常匹配。
扫一扫
6399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
