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(),
 ...
})

参考文章

https://www.jb51.net/article/138942.htm

https://blog.csdn.net/weixin_34194551/article/details/92636219

https://www.cnblogs.com/mengyouyouyou/p/10912378.html

https://www.cnblogs.com/diantao/p/7776523.html

https://forum.vuejs.org/t/vue-cli-3-build-assets-public-path/35669

https://my.oschina.net/qingqingdego/blog/3006013