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

发布于
2024-04-27 福建

按照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不执行...

vue-router 相对路径 javascript nuxt.js

阅读 1.5k

AI BotBETA

在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.js
const 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，它们可能提供了更灵活的路由配置选项。

2 个回答

得票最新

不死小强

2.2k73043

发布于
2024-04-27 上海

✓ 已被采纳

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