您的位置:首页 > Web前端 > Vue.js

使用前端路由 history 模式的前后端配置说明(Vue、Vue-Router、Webpack、tomcat 项目)

2019-04-03 14:07 1736 查看

前端:

[code]plugins: [
    // ...
    new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
    // ...
]
[code]devServer: {
historyApiFallback: true,
contentBase: './dist'
}
  • 路由配置:
  1. [code]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,关键配置如下,
[code] <error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
 </error-page>
  • 方案2:方案一的每一个路由请求都会返回404,所以需要后台处理发生404时,进行重定向到 /index.html,而不是返回404错误回复。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: