Question

我在Vue Webpack Cli项目中使用prerender-spa-plugin。从文档中我喜欢在webpack.prod.conf.js中注册插件

...
plugins: [
  ...
  new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'),
    ['/', '/about', '/contact'],
    {
      captureAfterTime: 5000
    }
  )
]

我想知道是否可以通过axios调用获取路径列表数组。我尝试了以下但没有成功：

var routes = axios.get('http://myapi.com/api').then(function (response) {
  return response.map(function (response) {
    return '/base/' + response.slug
  })
})

plugins: [
  ...
  new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'),
    routes,
    {
      captureAfterTime: 5000
    }
  )
]

由于我的Javascript知识很差，我无法解决这个问题。感谢任何提示。

祝你好运

Answer 1

这当前不会起作用（或至少可靠地工作），因为Webpack假定您的配置默认是同步的。要解决这个问题，请使用Webpack对asynchronous configuration的支持，并返回在路由请求后解决的承诺。

如果您所在的环境支持async/await（节点8+），那么它就像导出async功能一样简单。否则，请返回new Promise：

// webpack.conf.js
module.exports = async function () {
  const response = await axios.get('http://myapi.com/api')
  const routes = response.map((response) => {
    return '/base/' + response.slug
  })

  return {
    plugins: [
      // ...
      new PrerenderSpaPlugin(
        path.join(__dirname, '../dist'),
        routes,
        {
          captureAfterTime: 5000
        }
      )
    ]
  }
}

如果这不是一个选项，您可以随时拥有一个发出此请求的任务，将其写入json文件，然后将require('./route-response.json')写入您的配置中。

Answer 2

我有一个类似的要求-从我的API获取路由列表。我最终创建了一个预构建脚本- prebuild.js

const fs = require('fs')
const axios = require('axios')

// Fetch data from API
axios.get('http://myapi.com/api.php')
  .then(function(response) {
    const data = response.data
    try {
      // Save the route list to local file
      fs.writeFileSync('./route-response.js', data)
    } catch(err) {
      console.log(err)
    }
  })
  .catch(function(err) {
    console.log(err)
  })

我的API发送 route-response.js 文件的数据，准备由npm直接保存和使用。您可以改为在Node中处理此格式。样本格式：

module.exports = {
  theList: [
    '/',
    '/about',
    '/contact',
    '/login',
    '/register'
  ]
}

上面的文件是在 webpack.prod.conf.js 中获取的，如下所示：

...
const routeList = require('./route-response.js')
...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, '../dist'),
      routes: routeList.theList,
      renderer: new PuppeteerRenderer()
    })
    ...
  ]
  ...
})

最后，将预构建脚本添加到 package.json

prebuild：在构建步骤之前运行。
postbuild：在构建步骤之后运行。

这是一个样本

...
"scripts": {
  "dev": "node build/dev-server.js",
  "prebuild": "node build/prebuild.js",
  "build": "node build/build.js"
},
"dependencies": {
...

这样，我只需要运行 npm run build

在Vue Webpack Cli中获取通过axios的路线列表

2 个答案: