当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。
如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：
先来描述一下期间遇到的问题有哪些：
< 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。
1、项目目录结构
这是打包后的，所以有 dist 文件夹，打包方式：npm run build。
2、webpack.config.js
这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。
3、npm run build 打包后的文件。
npm run build 打包后生成一个 dist 文件夹，这里面的目录：
< 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。4、如何放到服务器中。
< 文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。然后将文件夹放到 tomcat 中，我将文件夹放到 tomcat 的 webap凡科抠图 文件夹目录下：
ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。
5、解决空白页和静态资源无法引入的问题。
< 页面。看一下没改之前的：
< 页面时，报404。我们需要将路径变成相对路径 ./dist/build/。多一个点，很关键。好了到这里应该面可以显示了。但是你会发现，我的静态资源，我的图片（不包括 img 形式的引入），例如我在 css 中 background:url() 的图片显示404。
2、解决静态资源失效的问题
这就需要修改我们的 webpack.config.js 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：
可以看到我们的路径是： /dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：dist/bg.png fe9b889ceace352593be0573
< 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的：
gas/dist/bg.png fe9b889ceace352593be0573
看出区别了吗！
解决：
所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去，这样就可以将静态资源引入进项目了。
< 空白页，另一个是 静态资源路径不正确的问题。 < 页面中的link 和 srcipt 引用的资源失效问题：原因还是路径的地址不对：
< 中按照 dist 的相对路径进行引用。代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中，然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。
7、待解决的问题：
1、在我的项目中，使用了 ElementUI 框架，但是在打包放到服务器中后，发现按钮样式变了，所有的 padding 失效，所有我只能自己手动进行添加样式。
< 中如果引入 link css文件时，还是没办法引入相对路径，所以我将 css 样式都放到了各自的组件中的 style 中了，其他的一般都是用 npm 注入依赖的形式进行安装。8、网上搜索到的相关问题和解决方法。
1、
2、
3、
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。