vue.config.js中chainWebpack支持异步数据

davidshi

vue.config.jschainWebpack支持异步数据

前言

项目背景

  • 项目使用vue-cli4搭建的,如需修改Webpack的配置,需要修改vue.config.js
  • 项目中,在chainWebpack中调用了html-webpack-plugin生成dev.html文件。
  • html-webpack-plugin的配置templateParameters支持模板参数注入,支持对象和方法。本文就是基于这个配置做文章。如何配置可参考:templateParameters demo

    在html页面接收foo参数,即可获得bar值:

    <script>
    <%= foo %>
    </script>

需求

  • 需要在dev.html注入一些数据,而这些数据是异步获取的(调用接口或者其他方式)。我这里是需要通过Node.js的child_process执行git命令,获取分支信息。

尝试

  • templateParameters支持function。可以尝试传入async方法,通过await获取到数据后,再返回。

遇到问题

  • chainWebpacktemplateParameters均不支持异步。

    • chainWebpack改为异步后,打包报错。
    • templateParameters改为异步后,虽不影响打包,但是变量不生效。

    tt1_spec

苦于vue-cli-servicehtml-webpack-plugin均不支持异步,只能另想办法。

解决

查阅资料

先通过百度,国内貌似没有类似的记录文章。然后Google,果然找到了类似需求:

Vue config async support

有人提出了类似的issue,虽然作者没有直接解决,但是也给出了一个work around:

image-20210317173603006

改代码

这个方法的思路,实际上将npm run serve包了一层wrap,在外层拿到数据后,再通过代码调用npm run serve开始打包。接下来我们来完成这个wrap。

  1. 首先新建一个文件serve.prehandle.js,用于wrap。先获取异步数据,待拿到之后再开始打包:

    const getGitDevInfo = require('./src/pages/demo/webpack-plugin/git-info')
    const isDevEnv = process.env.NODE_ENV !== 'production'
    module.exports = (api, options) => {
      api.registerCommand('serve:prehandle', async (args) => {
        if (isDevEnv) {
          const def = await getGitDevInfo()
          process.asyncParamter = def
        }
        await api.service.run('serve', args)
      })
    }
    
    module.exports.defaultModes = {
      'serve:prehandle': 'development'
    }
  2. 然后修改package.json

    修改serve命令

    {
      "scripts": {
        "serve": "vue-cli-service serve:prehandle"
      }
    }

    增加vuePlugins,对应上面的serve.prehandle命令,为这条命令指定处理文件

    {
       "vuePlugins": {
          "service": ["serve.prehandle.js"]
        } 
    }
  3. 修改vue.config.js去接收数据。这里我存在process全局变量中:

    config.plugin('html').use(HtmlWebpackPlugin, [{
      filename: 'dev.html',
      template: 'src/pages/demo/index.html',
      templateParameters: {
        config: `window.devGitInfo=${JSON.stringify(process.asyncParamter || {})}`
      },
      chunks: ['chunk-vendors', 'chunk-common', 'dev'],
    }])

接下来,执行后可生效!

npm run serve

相关知识点

vue-cli Service Plugin

vue-cli支持导入自定义的Service Plugin,具体参考下面文档:

Project local plugin

Add a new cli-service command

阅读 2.6k

Deliver Happiness

28 声望
6 粉丝
0 条评论

Deliver Happiness

28 声望
6 粉丝
文章目录
宣传栏