VUE3项目部署到Tomcat_vue怎么部署到taocat

VUE3项目部署到Tomcat

需求是将一个vue3项目部署到tomcat中，需要改动一些代码以适配。假设希望访问路径是http://localhost:8080/mypath。

index.js文件

修改route/index.js，主要将base和createWebHistory里改成自己的路径mypath

const router = createRouter({
  mode: 'history',
  base: '/mypath/',
  history:createWebHistory('/mypath/'),
  routes
})
1
2
3
4
5
6

vue.config.js文件

如果是export default defineConfig形式，添加base: './'即可。如下所示

export default defineConfig({
  base: './'
})
1
2
3

如果是module.exports，则修改publicPath。

部署

1. 首先在项目路径使用npm run build
2. tomcat路径下webapps创建文件夹mypath
3. 然后将生成的dist目录下的所有文件移动到mypath下
4. 运行tomcat即可

Reference

Vue3 + vue router 在history模式下部署到tomcat方案