vue项目通过打包命令参数，配置子目录

  

需求：根据不同的部署环境需求打包不同的基础路径，需要配置的地方有很多，每个不同路径都要重新修改一边，太麻烦了！

效果：通过执行的命令 npm run build routerbase=wap 修改路由基础路径 /wap/

build 指令如下：


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

开始配置

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

创建 build/routerbase.js 


/ process.argv 获取命令行命令数组，['node.exe路径','build.js路径', 'routerbase=wap']
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%> 替换之前的 /wap/ 


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



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

4、配置完成

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

以上是编程学习网小编为您介绍的“vue项目通过打包命令参数，配置子目录”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。

相关文章
前端开发最新文章
热门教程