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;
}

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

您可能感兴趣的文章:

Vue-CLI与Vuex使用方法实例分析
这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
2020-01-01
详解vue路由篇(动态路由、路由嵌套)
这篇文章主要介绍了详解vue路由篇(动态路由、路由嵌套)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue使用el-dialog关闭后重置表单方式
这篇文章主要介绍了Vue使用el-dialog关闭后重置表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue中使用/deep/失效的解决方法
这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/，如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
2022-11-11
Vue完整版和runtime版的区别详解
这篇文章主要为大家介绍了Vue完整版和runtime版的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue2子组件绑定 v-model,实现父子组件通信方式
这篇文章主要介绍了Vue2子组件绑定 v-model,实现父子组件通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
uniapp-vue3-弹出选择组件wo-pop-selector使用示例
wo-pop-selector弹出选择组件采用uniapp-vue3实现, 支持H5、微信小程序,本文给大家介绍uniapp-vue3-弹出选择组件wo-pop-selector及使用示例,感兴趣的朋友一起看看吧
2023-10-10
浅谈Vue3 父子传值
这篇文章主要介绍了基于Vue中的父子传值问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-10-10
Vue ECharts直角坐标系配置详细讲解
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库
2022-12-12
详解Unity webgl 嵌入Vue实现过程
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下
2024-01-01