《tomcat部署vue工程访问空白页》

前言：

        在mac上安装tomcat+jdk，用以部署vue工程

        安装步骤：https://www.jianshu.com/p/fe807440fda1

        vue工程打包：npm run build

        部署：将打包后的vue工程---dist，放在tomcat-webapps下

        启动tomcat：cd tomcat-bin，打开终端，输入命令：./startup.sh，访问tomcat：http://localhost:8080/

      访问vue工程： 

正文：

        问题：用tomcat部署vue工程，出现空白页，F12调试，发现报错所有资源为404

        问题定位：部署后的资源访问路径不对

        解决方案：在vue工程中，vue.config.js中，修改basehref路径：

module.exports = {
  publicPath: './',
}

        效果图：

结语：

        在angular中，部署也会遇到同样的问题，问题定位与vue如出一辙，解决方案是有三种方式：

        第一，在angular工程打包时，直接使用命令：ng build --base-href ./

        第二，直接修改angular工程的index.html页面的basehref：

<base href="./">

        第三，在package.json中修改：

         关联博客：《Angular之ng build部署后base文件路径问题》https://blog.youkuaiyun.com/yxf15732625262/article/details/82913233