基于对vue的学习,在不考虑seo的情况下,怎么将vue发布到后端, 并且使用jetty、tomcat等java容器实现部署,并且自由切换页面,实现和yarn serve或者npm run dev等方式的启动。
打包配置
不需要使用webpack等打包工具,默认使用vue-cli手脚架的vue-cli-service
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
编写vue.config.js
module.exports = {
publicPath: '/demo/', // 部署应用包时的基本 URL
outputDir: 'demo' // 指定打包输出目录
}
运行打包命令 yarn build
Jetty或者tomcat部署
将打包完成后的目录文件复制到webapps
下,我是将整个demo
文件夹复制。
然后在demo
文件夹下新建WEB-INF
文件夹,在WEB-INF
文件夹下新建web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<!-- 配置访问请求路径ip:port/demo -->
<display-name>/demo</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
PS:在省略WEB-INF
的情况下,也是可以直接访问到demo
下的vue
项目,但是只是将其作为静态资源进行访问,而在请求其中的单页面时,比如在demo
中除了默认进入的home
页面,还有login
等页面,在直接访问long
页面时,由于demo
下没有web.xml
文件,所以url的请求是完全交给jetty等容器处理的,不会将其中的请求交给通过vue router
,而vue router
能处理的只能是页面内的请求内容,也就是this.$router.push({name:'login'})
这种由js控制的请求,只能在内存中进行页面的跳转,而无法获取到浏览器地址栏的请求。因此在跳转到login
后无法正常的F5
刷新,而添加web.xml
就是告诉java
容器要将display-name
这个路径的请求内容交给demo
去处理,这样vue router
就可以对其进行接管。