使用前端路由 history 模式的前后端配置说明(Vue、Vue-Router、Webpack、tomcat 项目)
2019-04-03 14:07
1736 查看
前端:
- webpack.prod.config.js 配置:webpack.DefinePlugin配置说明
[code]plugins: [ // ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), // ... ]
- webpack.dev.config.js 配置:historyApiFallback 配置说明
[code]devServer: { historyApiFallback: true, contentBase: './dist' }
- 路由配置:
-
[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错误回复。
相关文章推荐
- Vue-router学习笔记——遇到的坑(一)history模式刷新/设置嵌套路由显示404/cannot find(webpack配置)
- vue-router使用history模式时,koa2后端的配置
- vue-cli 打包 使用 history模式 的后端配置
- vue-cli的webpack模板项目配置文件说明
- 使用webpack配置vue项目代理 (超简单)
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- 用vue-router和webpack搭建路由项目
- tomcat服务如何配置vue-router的history模式
- vue-cli 打包使用history模式的后端配置实例
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- webpack+vue 构建项目步骤并且使用sass 安装配置
- Vue.js结合vue-router和webpack编写单页路由项目
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue+Router+Webpack+Axios 构建项目实战(三)调整 App.vue 和 router 路由
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- 用vue+webpack搭建的前端项目结构