【Vue】Vue项目打包发布到服务器，以及空白页或图片不显示问题

一、Vue项目打包

Vue项目完成后，需要打包上线。打包只需要执行命令npm run build即可，但有两点需要注意的地方，否则就会出现空白页或图片不显示问题。

① 修改路径位置，解决空白页问题。

     修改位于项目目录中的config/index.js，将assetsPublicPath: '/'修改为assetsPublicPath: './'，注意有两处。如下：

   

   

   这样添加一个点就将路径变成了相对路径。

②解决背景图片不显示问题。

打包后的css文件夹内app.css文件访问static/img/’图片名’，路径错误访问不到图片。

修改位于项目目录中的build文件夹/utils.js，在如下图所示位置添加上publicPath:'../../'：

 

二、发布到Tomcat服务器

我的项目是发布到实验室的服务器上，相比java/stringboot项目打包后内置tomcat，可以直接在服务器机器上运行；Vue打包后是轻量级的static和index.html，因此首先需要在服务器机器上安装Tomcat。

其次，将Vue打包后的static和index.html放入到Tomcat中的webapps文件夹/ROOT文件夹，如下图所示：

（注意安装的Tomcat/webapps文件夹中有一些默认的文件，需要都删除掉，否则输入地址后显示的是Tomcat的默认网页）

最后，运行bin中的startup.bat文件启动tomcat服务器，就可以在任何电脑的地址栏中输入该网站的url访问啦。

这里还有两个需要注意点：

① 端口号设置。tomcat默认的端口号是8080可能在该服务器上面已经被占用，在conf/server中修改端口号。

② 防火墙开个端口。项目部署到实验室的服务器上后，在我电脑上访问网址却被拒绝，需要在服务器的防火墙开一个端口。