怎么把Vue项目发布到Tomcat上

 

前言：

      好久没学的Vue，最近又接着学了，好不容易使用vuecli写了一下Demo想在tomcat运行，但是页面是空白，打开一看，发现所有的JS全部都是404了。

我的操作顺序这样的：

1.打开终端 执行 npm run build （node编译打包命令，最后生成的网页都在工程的dist文件夹下）

2.拷贝./dist文件夹的所有网页相关文件

3.进行我的Tomcat目录，创建一个文件夹(我的名称是vuecli)

4.粘贴生成的网页等文件

5.重启Tomcat（默认本地运行）

6.访问项目http://localhost:8080/vuecli/

搜了好几个结果，最后定位到一个地方。

修改项目文件夹下 /config/index.js

网上普遍的方法：

修改：assetsPublicPath：

从 "/" 改为"./"

哇，效果是达到了。但是我觉得，我有必要搞清楚这个打包路径的问题。

首先，这里是想路径变为了相对路径，问题得到了解决，那么我们使用绝对路径应该怎么做呢，首先，tomcat默认的路径的是在webapp目录下，一个工程对应一个文件，正如我上文所说的,创建的vuecli文件夹，那么这就是对应了这个文件夹，那么，我如果在vue项目打包的时候，把工程名设置到打包路径下就行了。

（我的webapps目录）

（工程文件详情）

那么问题就非常简单了，在打包路径（assetsPublicPath）下不要使用“./”，而是去使用你在tomcat中创建的文件夹名称（即，工程名称，如上图，我的工程的名称是vuecli）

那么修改配置文件吧：./config/index.js 中  搜索 assetsPublicPath ，共两条记录，一条是在build里面，一条是在dev下，我们这里需要改的是build下

再次使用打包命令 npm run build

把文件部署到tomcat

重启tomcat，完事！

我们又可以看到熟悉的页面了！