怎么在Vue项目中部署子目录

介绍

本篇文章给大家分享的是有关怎么在Vue项目中部署子目录,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

使用了Poi进行管理:开发web应用程序没有构建配置,直到需要。也就是说Poi对webpack进行了封装,0配置开发网络应用。可以使用poi.config.js文件配置Poi的配置,也可以直接在包中。json中进行配置。

执行npm运行dev相当于执行poi,执行npm运行dist相当于执行poi构建。执行poi构建打包后,会将静态目录下的资源拷贝到dist目录,其他的js和css会自动压缩成。js和css并且注入到索引。html中。

poi项目如果需要打包到子目录,必须设置主页为子目录。这是第一步

第二步,必须将index . html中其他非Vue部分的资源增加子目录的前缀,包括网站的图标。

第三步保证Css文件中的资源路径为相对路径。

第四步,需要修改vueRouter中的基地为子目录。

然后执行npm运行开发也就是npm。观察打包后的指数。html、css文件等。

<节id=" smaller-text-left-8 ">

然后配置nginx到二级目录:,,,,,,,

,位置;票/{,,,,,,别名/root/java/ticket/dist/;,,,,,,try_files uri uri/@rewrites;美元,,,,},,,,位置@rewrites {,,,,,重写^/(机票| |签字报销)/(+)/1美元/美元指数。html的最后,,,,,}这里1美元对应的url中的票,由于我这里有多个项目共用了重写所以逻辑或了三个,如果只有一个子目录,使用^/(票)/(

<节id=" bigger-text-left-8 "> 节然后配置nginx到二级目录:,,,,的位置;票/{,,,,,,别名/root/java/ticket/dist/;,,,,,,try_files uri uri/@rewrites;美元,,,,},,,,位置@rewrites {,,,,,重写^/(机票| |签字报销)/(+)/1美元/美元指数。html的最后,,,,,}这里1美元对应的url中的票,由于我这里有多个项目共用了重写所以逻辑或了三个,如果只有一个子目录,使用^/(票)/(+),美元这里切记要把票扩起来。

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

以上就是怎么在Vue项目中部署子目录,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

怎么在Vue项目中部署子目录