webpack打包vue-cli2.x项目的路径问题

使用webpack打包vue-cli2.x项目会生成一个dist文件夹，将其复制到tomcat的webapps文件夹下，然后访问http://localhost:8080/dist时通常报404的错误，会发现static下的文件找不到，中间少了一层dist。下面是个人的解决方法：

1、如果js、json、png等静态文件是放在static文件夹下时，在javascript代码中一定要使用 ./static/ 的形式引入，在html代码中使用类似../../static/的相对路径方式。下面是正确的在vue文件中引入static下静态文件的例子：

image.png

2、修改config/index.js文件中build下的assetsPublicPath，把 / 修改为 ./ 。例子如下：

image.png

3、运行npm run build命令后，会生成dist文件夹，可以将其重命名后放进tomcat的webapps文件夹下即可。