使用前端路由 history 模式的前后端配置说明(Vue、Vue-Router、Webpack、tomcat 项目)
前端:webpack.prod.config.js 配置:webpack.DefinePlugin配置说明plugins: [// ...new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),// ...]webpack...
·
前端:
- webpack.prod.config.js 配置:webpack.DefinePlugin配置说明
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
// ...
]
- webpack.dev.config.js 配置:historyApiFallback 配置说明
devServer: {
historyApiFallback: true,
contentBase: './dist'
}
- 路由配置:
-
const mode = process.env.NODE_ENV; // 只要在webpack配置的入口文件下可以访问 const router = new VueRouter({ mode: 'history', base: mode === 'production' ? '/myApp-server/' : '/', // tomcat webapp routes // 自定义的路由: [] });
后台配置
- 方案1:修改tomcat 服务器的 webapps/myApp-server/WEB-INF/web.xml,关键配置如下,
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
- 方案2:方案一的每一个路由请求都会返回404,所以需要后台处理发生404时,进行重定向到 /index.html,而不是返回404错误回复。
更多推荐
已为社区贡献1条内容
所有评论(0)