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

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 和 return 的支持，这是在您的路由请求后解决的承诺。

如果您处于支持 async/await（节点 8+）的环境中，那么它就像导出 async 函数一样简单。否则，return一个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

预构建： 运行构建步骤之前。
构建后： 运行构建步骤后。

这是一个示例

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

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

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

get List of routes via axios in Vue Webpack Cli

javascript

config

prerender

webpack

vue.js