vue router 动态 base ，model 为history模式下，实现动态base

场景：

我的地址为：https://m.shophx.com/ 有2个url：

https://m.shophx.com/

https://m.shophx.com/about

当我进行切换多语言en，fr的时候，url变成

https://m.shophx.com/en 和 https://m.shophx.com/en/about

https://m.shophx.com/fr 和 https://m.shophx.com/fr/about

这个需要用到vue router base，实现

1.router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

function getAbsolutePath() {
  let path = location.pathname
  console.log(path)
  let subs = path.substr(0,3)
  console.log(subs)
 
  if (subs == '/en') {
    return '/en'
  }
  if (subs == '/fr') {
    return '/fr'
  }
}

const router = new VueRouter({
  routes: routes,
  base: getAbsolutePath(),
  mode: 'history'
})

export default router

2.vue.config.js文件： publicPath设置为 '/'

module.exports = {
    lintOnSave: false,
    publicPath: '/',
}

npm run build后，生成静态文件，将index.html改为index.php 上传服务器

3.nginx配置

location / {
    index index.php;
    if (!-e $request_filename){
            rewrite . /index.php last;
    }
}

上面的rewrite，就是当访问 https://m.shophx.com/fr/xxx/xx/x.jpp 的时候，实际访问的是 https://m.shophx.com/xxx/xx/x.jpp ，这样nginx就不会找不到文件了。

然后就可以访问了