vue webpack 项目通过打包命令参数，配置Router base 基础路径 npm run build routerbase=app

npm run build routerbase=app 根据不同的部署环境需求，webpack 项目通过打包命令参数，配置Router base 基础路径

Vue Router 中关于 base 配置的介绍默认值: "/" 应用的基路径。例如，如果整个单页应用服务在/app/ 下，然后 base 就应该设为 "/app/" 。`

碰到问题

根据不同的部署环境需求打包不同的基础路径，需要配置的地方有:

• Router base 的基础路径
• 打包时的基础路径 config.build.assetsPublicPath
• index.html 页面引入的放在 static 的文件路径

// src/router/index.js
const createRouter = () => new Router({
  base: '/app/',
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes
})

// config/index.js
build: {
    assetsPublicPath: '/app/'
}

<!-- index.html -->
...
<script type="text/javascript" src="/app/static/js/xxx.js"></script>
...

以上如果需要修改 /app/, 手动修改就会比较繁琐!!! 要学会偷懒

解决方法

思路：拿到命令行输入的参数，把参数赋值给打包运行的环境变量，然后赋值修改。

比如：通过执行的命令 npm run build routerbase=app 修改路由基础路径

build 指令如下：

"scripts": {
    "build": "node build/build.js",
},

1、获取命令行输入参数，并且配置环境变量 NODE_ENV_RBase

创建 build/routerbase.js

// process.argv 获取命令行命令数组，['node.exe路径','build.js路径', 'routerbase=app']
module.exports = function () {
  process.argv.forEach((val, index) => {
    if (val.indexOf('routerbase=') === 0) {
      const routerbase = val.split('=')[1]
      if (routerbase) {
        process.env.NODE_ENV_RBase = `/${routerbase}/`
      } else {
        process.env.NODE_ENV_RBase = '/'
      }
      console.log(`> router base "${process.env.NODE_ENV_RBase}"`,)
    }
  });
}

2、 在 build/build.js 引用 routerbase.js

// 引入并执行，放在文件顶部优先引入
require('./routerbase.js')()

3、环境变量 NODE_ENV_RBase 的配置

• Router base 的基础路径

  // src/router/index.js
  const createRouter = () => new Router({
    base: process.env.NODE_ENV_RBase || '/',
    mode: "history",
    scrollBehavior: () => ({ y: 0 }),
    routes
  })
  

• 打包时的基础路径 config.build.assetsPublicPath

  // config/index.js
  build: {
      assetsPublicPath: process.env.NODE_ENV_RBase
  }
  

• index.html 页面引入的放在 static 的文件基础路径

  index.html 的路径配置需要通过 htmlWebpackPlugin 的模板配置

  1、定义一个变量 rootPath: config.build.assetsPublicPath，

  2、在 index.html 通过模板语法引用 <%=htmlWebpackPlugin.options.rootPath%> 替换之前的 /app/

  // build/webpack.prod.conf.js
  new HtmlWebpackPlugin({
  	...
      rootPath: config.build.assetsPublicPath,
      ...
  }),
  

  <!-- index.html -->
  ...
  <script type="text/javascript" src="<%=htmlWebpackPlugin.options.rootPath%>static/js/xxx.js"></script>
  ...
  

4、配置完成

执行 npm run build routerbase=app 即可给打包的项目加上 /app/ 基础路径

执行 npm run build routerbase=wap 即可给打包的项目加上 /wap/ 基础路径

总结：基本思路就是 拿到命令行输入的参数，把参数赋值给打包运行的环境变量。然后赋值修改。