Vue项目打包部署到Tomcat
一. 思路使用 npm run build命令打包完成之后,会出现一个dist文件夹,里面有static文件夹和一个index.html文件,如果我们要部署在tomcat上面,即需要将dist文件放在tomcat里的webapps文件夹下,再用docker执行下重启指令,然后在本地起的vue项目就可以通过链接外部访问了。别人访问你本地的vue项目就不需要通过你的ip地址,在同一网段下才能访问了。二
一. 思路
使用 npm run build命令打包完成之后,会出现一个dist文件夹,里面有static文件夹和一个index.html文件,如果我们要部署在tomcat上面,即需要将dist文件放在tomcat里的webapps文件夹下,再用docker执行下重启指令,然后在本地起的vue项目就可以通过链接外部访问了。别人访问你本地的vue项目就不需要通过你的ip地址,在同一网段下才能访问了。
二. 步骤
1.在vue项目的vue.config.js文件中module.exports导出的对象中添加 publicPath: ‘./’ 的配置项,或者在module.exports导出的对象中的build对象里添加assetsPublicPath:"./"的配置项
2.在vue项目中的router文件夹下index.js添加配置项 base: ‘/文件夹名称/’ (文件夹名称可自己随意设置)
3.在tomcat下webapps里面新建一个文件夹,文件夹名称是之前在vue项目里router里配置base时设置的文件夹名称
4.npm run build打包后,将dist文件夹里的文件放到tomcat下webapps里面新建的那个文件夹下
三.代码
1.vue.config.js 文件的代码
module.exports = {
publicPath: './',
}
2.router文件夹下index.js的代码
import Login from '@/views/Login/login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
component: Login,
name: 'Login'
}
const router = new VueRouter({
base: '/daasportal/',
//文件夹名称可自己随意设置,需要与后续tomcat下webapps里面新建的那个文件夹名字保持一致
routes
})
export default router
更多推荐