vue ---webpack 打包上线

 先来描述一下期间遇到的问题有哪些：

　　一、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。
　　二、打包好的静态资源均是绝对路径，没法引入进项目，也是 404。

一、项目目录结构

　　这是打包后的，因此有 dist 文件夹，打包方式：npm run build

二、webpack.config.js

　　

三、npm run build 打包后的文件。

　　npm run build 打包后生成一个 dist 文件夹，这里面的目录

　　

四、如何放到服务器中。

　　1.接下来就是须要将生成的 dist 文件夹和 index.html 文件放到服务器中，只须要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。

　　

　　2.而后将文件夹放到 tomcat 中，我将文件夹放到 tomcat 的 webapps 文件夹目录下：

　　

　　ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。

五、解决空白页和静态资源没法引入的问题。

　　一、首先空白页的问题，能够重 f12 中看出来都是绝对路径的缘由，而咱们打包后，应该的引入路径是相对路径，这时咱们须要的是修改 index.html 页面。

　　　　看一下没改以前的：

　　　　

　　　　看我 /dist/build.js 引用的是绝对路径，这就致使了在 tomcat 去访问 index.html 页面时，报404。咱们须要将路径变成相对路径 ./dist/build/。多一个点，很关键。好了到这里应该主页面能够显示了。

　　　　可是你会发现，个人静态资源，个人图片（不包括 img 形式的引入），例如我在 css 中 background:url() 的图片显示404。

　　二、解决静态资源失效的问题

　　　　这就须要修改咱们的 webpack.config.js 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：

　　　　

　　　　

　　能够看到咱们的路径是： /dist/。因此这时候咱们若是打开页面，静态资源的路径都会是这样子的，而且报错404：

　　　　http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573

　　显然能够看出和咱们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。因此正确的路径应该是这样的：

　　　　http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

看出区别了吗！

　　

解决：

因此我须要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去，这样就能够将静态资源引入进项目了。

ok,到如今为止，最主要的两个问题解决了，一个是 index.html 空白页，另外一个是 静态资源路径不正确的问题。

　　

六、index.html 页面中的link 和 srcipt 引用的资源失效问题：

　　缘由仍是路径的地址不对：

　　妥协的解决方法是：将本身引用的资源手动放到打包出来的 dist 文件夹内，而后在 index.html 中按照 dist 的相对路径进行引用。

　　

　　代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中，而后按照对应的引用路径进行引用。其余的 css 和 js 引用同样。

　　

七、待解决的问题：

　　一、在个人项目中，使用了 ElementUI 框架，可是在打包放到服务器中后，发现按钮样式变了，全部的 padding 失效，全部我只能本身手动进行添加样式。

　　二、在个人 index.html 中若是引入 link css文件时，仍是没办法引入相对路径，因此我将 css 样式都放到了各自的组件中的 style 中了，其余的通常都是用 npm 注入依赖的形式进行安装。