在实际工作和生活中，经常会遇到需要在一个域名下部署多个小应用的场景，由于VUE项目的一些特性吧，在初次这样部署时，会有一些坑，这里就做个简单分享，以帮助各位避免这些问题。既然是同一个域名，不同的项目我们基本思路就是根据路径来区分。

一、VUE项目的按路径配置

这里需要配置多个地方。

（1）发布路径配置：在 vue.config.js文件中，有一个 publicPath，这里是资源访问的路径，对应的资源访问路径，对应nginx只是 tryfiles的路径。

（2）修改路由路径：在 new Router()内部配置 base，这里配置的是URL中的访问路径；这里的路径可以和第一步的不一样，但是建议配置一样，不容易出问题。

（3）修改导入的静态资源访问路径：这里主要是通过路径引入的外部资源。这里是个坑，我首次在这里花费了很多时间。具体还需要根据自己的项目而定，先排查一下自己通过路径引入的资源路径的位置，也可以通过调试查看哪些资源不可访问来确定，我的项目中是引用了tinymce，刚开始就是引入总是错误，后来调试发了引入的路径没有添加项目的路径。

以上配置完成，一个含路径的VUE项目就完成了。

二、nginx配置

前面我们的前端项目已经配置完成了，现在开始发布了，这里我们采用nginx发布。这里基本的nginx配置就不说，只需要在 原有的server下现在一个 location即可。这里 location后面跟的路径是 VUE 路由route中的路径，也是我们页面URL区分的路径。alias 对应的值，就是本次VUE项目编译后的资源的保存位置。 try_files 后面的“/wenjuan/”就是我们VUE项目的发布路径publicPath.

重启启动nginx，我们的项目就可以通过 “IP:端口/wenjuan/具体路径”来访问项目了。至此，我们的一个VUE项目就按 wenjuan这个文件夹发布就全部完成了。