VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

编译后实际项目不在根目录下怎么办?

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

这次编译后实战项目不在目录下怎么办?实战项目编译后不在根目录下有哪些注意事项?下面是实战案例。让我们来看看。

例如:

vu E-路由器:历史模式内网环境:192 . 168 . 1 . 1:8080/index . html外网环境:domain.com/ttsd/index.html

由于开发的项目将部署在客户端,并且客户端不希望使用单个域名(或子域)进行部署,因此打包的程序将必须进行一些配置修改。

修改配置文件

1.将打包的资源引用修改为相对路径,并在config/index.js中的build属性下找到assetsPublicPath

构建:{...assets public path: # 39;。/'//未修改的配置是 # 39;/',}编译后实际项目不在根目录下怎么办?-主机参考

2.修改资源文件(图片、视频、字体文件等。)来查找build/utils.js中的相对路径,并将publicPath添加(或修改)到 # 39;../../'

if(options . extract){ return extract plugin . extract({ use:loaders,fallback: # 39;vu E-style -loader # 39;,公共路径: # 39;../../'//修改路径})}否则{return

修改路线

在路由的历史模式下,所有路由都基于根路径,如/xxxx。因为部署目录是未知的,所以我们可以根据location.pathname获取当前访问文件的路径来修改路径。

vu E-路由器中提供了一个基本属性。

基本类型:字符串默认值:"/ ;应用程序的基路径。例如,如果整个单页应用程序服务在/app/下,那么base应该设置为“/app/ ;。

修改路由代码

函数getAbsolutePath(){ let path = location . pathname返回path.substring(0,path . lastindexof( # 39;/')+ 1)}const routers =新路由器({ mode: # 39;历史 # 39;,base: getAbsolutePath(),...})至此,打包配置的相关修改全部完成,项目可以正常访问。但是仍然会有一个问题。跳到某条路线后,刷新页面,就gg了。这页是空白的。此时,nginx的配置将被修改。

修改nginx的配置

nginx官方配置在根目录,即https://router . vue js . org/zh-cn/essentials/history -mode . html # nginx

location/{ try _ files $ uri $ uri//index . html;//需要修改为try _ files $ uri $ uri//dist/index . html;}注:/dist根据实际部署的网站目录,修改即可。个人感受也可以通过nginx内置的指令动态获取,不过现在还不清楚。

相信你看完这个案例已经掌握了方法。更多精彩请关注主机参考其他相关文章!

推荐阅读:

VuePress制作个人网页。

如何绑定方向键控制div移动?以上是编译后实际项目不在根目录下时的具体做法。请多关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:编译后实际项目不在根目录下怎么办? https://zhujicankao.com/80222.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 编译后实际项目不在根目录下怎么办?
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!