微服务和VUE：VUE前端工程打包

1. 介绍

在我们完成代码编写之后，肯定是要把前端和后端 部署到服务器上面的，因此在部署之前，我们需要先打包我们的项目文件。

VUE工程打包很方面，在工程目录下运行：


npm run build


若不报错，就成功了。一般不会报错，当然第一次打包的时候，我也遇到了一些错误，笨笨的我不知道如何解决，直接重新建了一个新的工程，把原来的文件该复制的复制，很神奇的就ok了。

在打包之后，会新生成dist文件夹，里面有static文件夹和index.html文件。

因为VUE配置文件本身的问题，我们原来img和js文件的路径在打包之后会出现问题，因此我们需要修改以下两个js文件。

2. 修改config/index.js文件

修改


assetsPublicPath: '/',


改为：


assetsPublicPath: './', (加个点)


注意这句话出现了两处。具体文件，搜索一下就ok。

3. 修改build/utils.js文件


if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })


其中，加上：publicPath: '../../'。

4. 打包

完成以上的修改，我们就可以进行打包了。


npm run build


若出现类似下面的图片，说明安装成功

前端yarn打包prod 前端打包流程_前端yarn打包prod

这时候，在工程目录下会出现dist文件夹。

前端yarn打包prod 前端打包流程_tomcat_02

我们可以直接打开index.html

前端yarn打包prod 前端打包流程_vue.js_03

如果打开发现是空白页面，在检查第2步，第3步是否出现问题。

5. 使用tomcat测试

tomcat安装教程，额，自己的查查吧。

5.1 使用管理员身份，开启tomcat服务

注意：使用管理员身份，否则会报错

前端yarn打包prod 前端打包流程_tomcat_04

进入Tomcat安装路径中bin文件夹

运行： net start tomcat8 (tomcat我安装的是8).

5.2 验证tomcat是否开启成功

浏览器输入： http://localhost:8080

若出现下图，则说明启动成功

前端yarn打包prod 前端打包流程_tomcat_05

5.3 文件复制

打开tomcat目录下的webapps，在此文件夹中新建admin文件夹（名字随便去）。将我们打包生成的dist文件夹中的static和index复制到admin文件夹中。

5.4 浏览器验证

浏览器输入： http://llocalhost:8080/admin/

前端yarn打包prod 前端打包流程_服务器_06

启动成功，若有服务器的话，我们就可以直接将生成的dist文件夹传到服务器上了。如果我们服务器上也是使用的是tomcat服务器，那么放到tomcat目录下的webapp文件夹中就ok。当开启tomcat服务后，我们就可以通过服务器的ip和tomcat的接口访问到我们的网站了。

6.总结

VUE打包很方便，但是需要注意的是，第2步，和第3步中的修改。这里修改的作用是为了使打包后产生的index.html文件可以正确找到JS,CSS等文件，否则这些文件的相对路径是错误的。