vue-cli4 下项目打包如何部署到相对目录

我们在vue-cli4 下部署项目想部署到相对目录下，

    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",

但是由于我们配置的publicPath是“./”但是实际上打包的时候这这个值或者说模板中的base_url并不会被解析成为我们想要的./ 这个可以说是一个 vue-cli4 这个版本的webpack配置的一个坑。经过多次尝试。

这个模板中的<%=BASE_URL %>并不会被解析成为当前的目录即 “./”，如果有这种需求部署的同学可能就很恼火，经过我的实践，实际上是我们对相对目录的理解偏差了。

实际上这个地方是完全可以配置为你想要的相对目录的。即你要把你部署后的相对目录配出来。
例如：
你想让项目部署后，位于www/data目录下，而根目录是www,这个时候，那就可以将publicPath配置成为“/data”,这个时候主站访问域名假如为： http://www.test.dev则你的站点访问目录则为： http://www.test.dev/data， 这个时候实际你的静态资源目录就是相对于跟目录下的data目录。

已我的的配置为例：

两个环境变量，本地运行为development 这里忽略。
主要看build的production环境。

NODE_ENV=production
VUE_APP_PATH="/screen"
VUE_APP_MODE=hash

这样我们打包出来的文件路径为：

访问路径为：

则正常显示。

不过这种部署方式，还是不够灵活，比如我不想知道我的项目真实环境中是如何部署的指定目录，只是只是相对目录部署，那就要多次改变配置文件。不够灵活。

如果基于chainWebpack去动态扩展，将publicPath添加到webpack的配置内，可能会更好的一些。
如果有更好的处理办法，我会去补充，有某位同学有更好的办法，欢迎补充