详解Vue项目编译后部署在非网站根目录的解决方案
同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录。 eg. : vue-router: history模式 内网环境:192.168.1.1:8080/index.html 外网环境:domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方,且客户并不想单独拿一个域名(或子域)来部署,这时,打包后的程序就要作一些配置方面的修改了。 修改配置文件1、把打包后的资源引用修改为相对路径 找到 2、修改样式引用的资源文件(图片、视频、字体文件等)为相对路径 找到 修改路由在路由的history模式下,所有的路由都是基于根路径的,如 vue-router里提供了一个base的属性 base类型: 修改路由代码 const routers = new Router({
mode: 'history',base: getAbsolutePath(),... }) 至此,打包配置的相关修改已全部完成,项目也能够正常访问。 但还是会有一个问题,跳转到某个路由后,刷新页面,就gg了,页面为空白,此时就要修改nginx的配置了。 修改nginx的配置官方给的nginx配置是根目录下的,即 // 需要修改为
try_files $uri $uri/ /dist/index.html; } 注: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |