有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue publicpath(一个域名部署多个VUE前端项目)

vue 炮渣日记 2周前 (11-18) 9次浏览 已收录 0个评论 扫描二维码

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

一、VUE项目的按路径配置

这里需要配置多个地方。

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

vue publicpath(一个域名部署多个VUE前端项目)

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

vue publicpath(一个域名部署多个VUE前端项目)

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

vue publicpath(一个域名部署多个VUE前端项目)

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

二、nginx配置

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

vue publicpath(一个域名部署多个VUE前端项目)

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

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址