问题描述
最近尝试把项目脚手架从vue-cli2 webpack2 更新到vue/cli 3 webpack4
由于之前项目是多页面,在用脚手架生成了项目目录之后, 在vue-cli-service serve开发环境时发现了一些问题。
工程里有两个页面index
和login
, 也配了两个入口。但在默认页面中路由跳转都正常,但我点击按钮 通过window.location.href = '/login'
访问另一个页面login
时,返回的资源依然是index.html
和index.js
只有通过更改url访问 localhost:3007/login.html
时,url会变成localhost: 3007/login/.html
这时候才会返回login.html
和login.js
PS:通过 build打包之后访问后台(nodejs)访问一切都正常。
项目目录
问题出现的环境背景及自己尝试过哪些方法
相关代码
vue.config.js
module.exports = {
devServer: {
port: 3007,
host: 'localhost',
open: true,
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><%= htmlWebpackPlugin.options.title %></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/main.js'
},
}
找到方法了
既然是开发环境配置,估计和devServer有关,查看了webpack4官网关于devServer的部分,找到了devServer.historyApiFallback
看到了这部分
恍然大悟,对于特定路由,可以指定静态资源。
所以把vue.config.js 改为了如下
这样当我
window.location.href = '/login'
时,匹配到login
,静态资源就会返回login.html
, 而且 若login页面若有多个路由时,login/route1
或login/route2
也会正常匹配。