vue build 相对路径 如何变成绝对路径_微服务和VUE(27)：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

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

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

我们可以直接打开index.html

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

5. 使用tomcat测试

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

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

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

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

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

5.2  验证tomcat是否开启成功

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

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

5.3  文件复制

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

5.4 浏览器验证

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

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

6.总结

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