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)
    }

添加的位置如下如的函数体里面:
在这里插入图片描述
至此打包结束

Logo

前往低代码交流专区

更多推荐