vue项目部署到非根目录下的问题及解决
目录
- 问题描述
- 解决方案
- 1、Vue配置
- 2、修改路由
- vue项目部署在非根目录下的配置
- 版本
- vue项目配置
- nginx配置
问题描述 同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录。
eg. :
- vue-router: history模式
- 内网环境:192.168.1.1:8080/index.html
- 外网环境:domain.com/ttsd/index.html
解决方案 【vue项目部署到非根目录下的问题及解决】
1、Vue配置
Vue 2
将 config/index.js 里的 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "static",assetsPublicPath: "/app/", //修改打包后路径修改这里
文章图片
Vue 3
在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改)
module.exports = {publicPath: '', // 相对于 HTML 页面(目录相同)}
2、修改路由
- 在路由的history模式下,所有的路由都是基于根路径的,如 /xxxx ,由于部署目录未知,所以我们可以根据 location.pathname 来获取到当前访问的文件路径,来修改路由。
- vue-router里提供了一个base的属性
- base类型: string 默认值: "/" 应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/" 。
增加基础路径 base:"/app/"
const router = new Router({mode: "history",// base: getAbsolutePath(),base: "/app/",routes: [...]......
动态获取根路径
function getAbsolutePath () { let path = location.pathname return path.substring(0, path.lastIndexOf('/') + 1)} const routers = new Router({ mode: 'history', base: getAbsolutePath(), ...})
vue项目部署在非根目录下的配置
版本
注:使用版本较新,项目结构可能存在差异。
文章图片
vue项目配置
src/vue.config.js -- 打包配置(我理解的是打包配置,不确定是不是)
module.exports = {publicPath: '/pgcweb/',src/router/index.js -- 路由配置const router = new VueRouter({base: '/pgcweb/',//mode: 'history',
nginx配置
location ^~ /pgcweb{alias /xxx/xxx/xxx/dist; try_files $uri $uri/ /pgcweb/index.html; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- 部属vue项目|部属vue项目,访问路径设置非根,显示白屏的解决方案
- 5种云部署模型的差异比较(它们有什么不同())
- Android 学习之开源项目PullToRefresh的使用
- 如何在Docker上部署NGINX反向代理(分步指南)
- Android 项目开发填坑记 - 获取系统语言(兼容7.0)
- 如何在Kubernetes上部署RabbitMQ(分步指南)
- SpringCloudAlibaba微服务docker容器打包和部署示例实战
- cordova跨平台app开发01_创建项目桌面图标启动图配置
- 看财报|“电热毯第一股”彩虹集团,盈利能力趋弱,IPO项目进展极度缓慢|看财报
- 怎么解决Android studio导入项目卡死