1.首先解决静态资源加载不出来的问题;
vue3.0解决办法
需要在vue.config.js 添加 publicPath: ‘./’,
vue2.0解决办法
找到config目录下的index文件 将assetsPublicPath:‘/’改为assetsPublicPath:‘./’
做完第一步打包放到tomcat上 静态资源是可以加载出来了 但是页面会出现空白的情况
2.需要找到router文件夹找到index.js在里面配置base,这里的路径要和tomcat配置的路径核对上
做完第二步 npm run build 生成dist目录将生产的dist目录放置到tomcat 里面的webapps目录里面此时需要修改dist文件名 名称对应的就是你base配置的路径名称 此刻对应的就是(webProject)
完成之后启动tomcat 访问localhost:8080/webProject就可以打开vue打包后的项目 端口对应的是tomcat的server.xml里面的端口
此时你会发现图片资源没有加载出来 这个是需要在build目录下的utils.js添加如下代码:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',//部署时新增
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
添加的位置如下如的函数体里面:
至此打包结束