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

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

1. 介绍

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

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

登录后复制

npm run build

• 1.

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

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

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

2. 修改config/index.js文件

修改

登录后复制

assetsPublicPath: '/',

• 1.

改为：

登录后复制

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

• 1.

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

3. 修改build/utils.js文件

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

其中，加上：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等文件，否则这些文件的相对路径是错误的。

原创作者: u_15464066 转载于: https://blog.51cto.com/u_15464066/11517625