javascript - Vue-router history模式下如何使用相对路径进行打包？

Question

按照Vue-router官网，history路由模式下，publicPath无法使用相对路径，需要router里base配对对应路径/url。但现在项目有个需求是前端打一份包，放在两个路径下:
http://111.11.11.1/urlA/
http://111.11.11.1/urlB/

前端项目路由模式是history，只打一份包的话只能配置一个base，如何满足这种需求？

尝试过将publicPath和base都配成相对路径的形式，在页面上能拿到js且js路径正确，但是js不执行...

Answer 1

publicPath 和 vue-router 的 base 直接用 / 不行吗？

如果有其他的情况，比如说你是部署在多个服务器的不同二级目录下的，那么你最好使用 环境变量 的形式来做。

---

或者你把你的具体场景描述清楚，我们再看具体情况来给你提供建议。

Answer 2

你可以改变一下思路，通过nginx配置来实现试试：
打包一份代码，不带baseUrl，
部署到两个端口下：
localhost:9527
localhost:9528
然后通过代理转发将localhost/urlA 代理到localhost:9527
localhost/urlB代理到localhost:9528，
这样就只需要打包一份代码了

Answer 3

在Vue-router的history模式下，publicPath 和 base 确实需要配置为与你的实际部署路径相对应。由于你的需求是前端项目需要同时部署在 http://111.11.11.1/urlA/ 和 http://111.11.11.1/urlB/ 这两个路径下，而Vue-router并不支持为不同的部署路径打包不同的版本，因此你需要采取一些策略来解决这个问题。

一种可能的解决方案是动态设置publicPath。在构建过程中，你可以根据构建命令来设置不同的publicPath。例如，你可以使用Webpack的DefinePlugin来定义全局变量，然后在代码中根据这个变量来动态设置publicPath。

以下是一个基本的示例：

// webpack.config.jsconst path = require('path');const webpack = require('webpack');module.exports = {  // ...  plugins: [    new webpack.DefinePlugin({      'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL || '/urlA/')    })  ],  output: {    publicPath: process.env.BASE_URL || '/urlA/'  }  // ...};

然后，在你的Vue应用中，你可以这样设置base：

// main.js 或其他入口文件import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL || '/urlA/'  // ...});new Vue({  router,  // ...}).$mount('#app');

然后，你可以为不同的部署环境设置不同的BASE_URL环境变量。例如，如果你使用的是.env文件来管理环境变量，你可以为不同的环境创建不同的.env文件，如.env.urlA和.env.urlB，然后在构建时通过--env参数来指定使用哪个环境变量文件。

这样，当你构建项目时，只需要根据部署的环境选择相应的环境变量文件，就可以动态地设置publicPath和base，从而满足你的需求。

然而，这种方法有一个限制，那就是你需要为每个部署环境都构建一份代码。如果你的项目非常大，这可能会增加构建的时间和生成的包的大小。如果你希望只构建一份代码，那么你可能需要考虑使用Vue-router的hash模式，或者使用其他前端路由库，如React Router或Reach Router，它们可能提供了更灵活的路由配置选项。