vue项目部署到非根目录下的问题及解决

更新时间：2022年04月19日 16:00:10 作者：Starzkg

这篇文章主要介绍了vue项目部署到非根目录下的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

问题描述

同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。

eg. ：

vue-router: history模式
内网环境：192.168.1.1:8080/index.html
外网环境：domain.com/ttsd/index.html

由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时，打包后的程序就要作一些配置方面的修改了。

解决方案

1、Vue配置

Vue 2

将 config/index.js 里的 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",

   // Paths
    assetsRoot: 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/" 。

router => index.js

增加基础路径 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;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vuejs使用递归组件实现树形目录的方法
本篇文章主要介绍了vuejs使用递归组件实现树形目录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue实现echarts中的仪表盘
这篇文章主要为大家详细介绍了vue实现echarts中的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue项目实战总结篇
离放假还有1天，今天小编抽空给大家分享前端时间小编做的vue项目，非常完整，需要的朋友参考下
2018-02-02
el-date-picker如何筛选时间日期选择范围
这篇文章主要介绍了el-date-picker筛选时间日期选择范围,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2024-12-12
Vue 实现可视化拖拽页面编辑器
这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2021-02-02
vue.config.js里面的devserver如何配置
本文介绍了vue.config.js中devServer的常见配置方式,包括基本配置、代理配置、热模块替换、静态资源服务、HTTPS配置、多代理配置以及其他配置项,帮助开发者根据项目需求进行定制
2025-01-01
vue3获取当前路由地址
本文详细讲解了vue3获取当前路由地址的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-01-01
VUE多层路由嵌套实现代码
这篇文章主要为大家详细介绍了VUE多层路由嵌套的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue如何在多个不同服务器下访问不同地址
这篇文章主要介绍了vue如何在多个不同服务器下访问不同地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue项目优化打包详解
这篇文章主要为大家介绍了Vue项目的优化打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11