实现vue-cli打包一份代码多个项目共用遇到的一些问题

Question

问题

现在的需求是需要打包一份代码，但是多个项目用，打包后直接放在本地，用tomcat起服务进行测试。比如

• http://localhost:39090/segment/fault/a/main/
• http://localhost:39090/segment/fault/b/main/
• http://localhost:39090/segment/fault/c/main/

也就是说需要在history模式下进行相对路径打包，目前我的做法是获取pathname动态更改router的base，如a项目就更改base为'/segment/fault/a/main'，目前是可以实现我打一次包，四个项目共用一份代码，但是地址不同的需求。这个方法是不健壮的，如果大神们有其它方法实现一次打包，多个地址共用一份代码的方法，希望可以分享一下。

目前出现的问题是：

我在地址栏里直接输入http://localhost:39090/segment/fault/a/main/是可以访问的(路由里做了重定向)，路由切换也是没问题的，但是，我在地址栏里输入http://localhost:39090/segment/fault/a/main/TestManagement或者其它指定的路由就不能访问了，实在没搞懂这是为什么。在本地npm run dev起服务则两种访问方式都没有问题。

router设置

export default new Router({
  mode: 'history',
  // 目前我的做法是动态改变base
  base: '/segment/fault/a/main',
  routes: [
    {
      path: '/',
      redirect: 'TestManagement'
    },
    {
      path: '/Login',
      component: Login,
      name: 'Login',
      meta: {title: '登录页'}
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      children: childrenRouter
    },
    {
      path: '/404',
      component: NotFound,
      name: 'NotFound',
      hidden: true,
      meta: {
        title: '找不到页面'
      }
    },
    {
      path: '*',
      name: '*',
      hidden: true,
      redirect: {path: '/404'}
    }
  ]
})

build设置

  build: {

    // Template for index.html
    index: path.resolve(__dirname, '../main/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../main'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    }

tomcat设置

<error-page>
    <error-code>404</error-code>
    <location>./main/index.html</location>
</error-page>

期待的结果

我直接执行一次npm run build打包命令，打包一份main代码，可以直接丢到多个项目下的tomcat，起服务能够在

• http://localhost:39090/segment/fault/a/main/
• http://localhost:39090/segment/fault/b/main/
• http://localhost:39090/segment/fault/c/main/

这几个目录下访问，并且能够直接访问相应的路由http://localhost:39090/segment/fault/a/main/TestManagement

万分感谢！！！

Answer 1

vue-cli 3 的话，有个 baseUrl 的设置，设置好后 vue-router 初始化的设置 base 为如下：

const router = new VueRouter({
  base: process.env.BASE_URL
})

cli 2 没用过你可以查下文档有没有这种方法，没有可以用 webpack 的插件方式设置，webpack plugins 配置加入如下内容：

new webpack.DefinePlugin({
  'process.env': {
    BASE_URL: JSON.stringify('你要设置的路径')
  }
})

然后 vue-router 里做同样的设置即可。

Answer 2

每个对应一个模板index.html，在文件里面设置一下<base href="">就好了