关于vue-cli4:vueconfigjs中chainWebpack支持异步数据

49次阅读

共计 1802 个字符,预计需要花费 5 分钟才能阅读完成。

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改为异步后,虽不影响打包,然而变量不失效。

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

解决

查阅材料

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

Vue config async support

有人提出了相似的 issue,尽管作者没有间接解决,然而也给出了一个 work around:

改代码

这个办法的思路,实际上将 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

正文完
 0