{"id":272885,"date":"2024-05-16T13:26:22","date_gmt":"2024-05-16T05:26:22","guid":{"rendered":"https:\/\/docs.pingcode.com\/ask\/ask-ask\/272885.html"},"modified":"2024-05-16T13:26:33","modified_gmt":"2024-05-16T05:26:33","slug":"nuxt%e9%a1%b9%e7%9b%ae%e5%a6%82%e4%bd%95%e5%9c%a8%e8%b7%af%e7%94%b1%e5%9c%b0%e5%9d%80%e4%b8%8a%e6%b7%bb%e5%8a%a0-html%e5%90%8e%e7%bc%80","status":"publish","type":"post","link":"https:\/\/docs.pingcode.com\/ask\/272885.html","title":{"rendered":"nuxt\u9879\u76ee\u5982\u4f55\u5728\u8def\u7531\u5730\u5740\u4e0a\u6dfb\u52a0.html\u540e\u7f00"},"content":{"rendered":"

\"nuxt\u9879\u76ee\u5982\u4f55\u5728\u8def\u7531\u5730\u5740\u4e0a\u6dfb\u52a0.html\u540e\u7f00\"<\/p>\n

Nuxt\u9879\u76ee\u5728\u8def\u7531\u5730\u5740\u4e0a\u6dfb\u52a0.html\u540e\u7f00\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6eNuxt.js\u7684\u8def\u7531\u6269\u5c55\u548c\u751f\u6210\u89c4\u5219\u6765\u5b9e\u73b0\uff0c\u5173\u952e\u6b65\u9aa4\u5305\u62ec\u4f7f\u7528Nuxt\u7684extendRoutes<\/code>\u65b9\u6cd5\u81ea\u5b9a\u4e49\u8def\u7531\u914d\u7f6e\u3001\u5728nuxt.config.js<\/code>\u4e2d\u4fee\u6539\u8def\u7531\u89c4\u5219\u3001\u4ee5\u53ca\u5229\u7528\u751f\u6210\u914d\u7f6e\u6765\u5e94\u5bf9\u9759\u6001\u7ad9\u70b9\u7684\u9700\u8981\u3002<\/p>\n<\/p>\n

\u5173\u952e\u6b65\u9aa4<\/strong>\u5305\u62ec\u4fee\u6539nuxt.config.js<\/code>\u6587\u4ef6\u3001\u7f16\u5199\u81ea\u5b9a\u4e49\u8def\u7531\u89c4\u5219\u3001\u8bbe\u7f6egenerate\u5c5e\u6027\u3002\u5bf9\u4e8e\u52a8\u6001\u8def\u7531\uff0c\u8fd8\u9700\u8981\u7279\u522b\u6ce8\u610f\u91c7\u7528\u5408\u9002\u7684\u65b9\u6cd5\u6765\u751f\u6210\u5177\u6709.html\u540e\u7f00\u7684\u8def\u5f84\u3002<\/p>\n<\/p>\n

\u4e00\u3001NUXT\u914d\u7f6e\u8c03\u6574<\/h3>\n<\/p>\n

\u5728Nuxt\u9879\u76ee\u4e2d\u6dfb\u52a0.html<\/code>\u540e\u7f00\uff0c\u9996\u5148\u9700\u8981\u5728nuxt.config.js<\/code>\u4e2d\u8fdb\u884c\u76f8\u5e94\u7684\u914d\u7f6e\u8c03\u6574\u3002<\/p>\n<\/p>\n

export default {<\/p>\n
  router: {<\/p>\n
    extendRoutes(routes, resolve) {<\/p>\n
      routes.forEach((route) => {<\/p>\n
        route.path = route.path + '.html';<\/p>\n
      });<\/p>\n
    }<\/p>\n
  },<\/p>\n
  generate: {<\/p>\n
    subFolders: false \/\/ \u9759\u6001\u7ad9\u70b9\u751f\u6210\u914d\u7f6e<\/p>\n
  }<\/p>\n
}<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u5728\u8fd9\u4e2a\u914d\u7f6e\u4e2d\uff0cextendRoutes<\/code>\u7528\u4e8e\u81ea\u5b9a\u4e49\u8def\u7531\uff0c\u901a\u8fc7\u904d\u5386\u6240\u6709\u8def\u7531\u7136\u540e\u5728\u8def\u5f84\u540e\u9762\u6dfb\u52a0.html<\/code>\u540e\u7f00\u3002generate.subFolders<\/code>\u8bbe\u7f6e\u4e3afalse<\/code>\u610f\u5473\u7740\u5f53\u4f60\u8fd0\u884cnuxt generate<\/code>\u751f\u6210\u9759\u6001\u6587\u4ef6\u65f6\uff0c\u4e0d\u4f1a\u4e3a\u6bcf\u4e2a\u8def\u7531\u751f\u6210\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u800c\u662f\u76f4\u63a5\u5728\u8def\u7531\u540d\u79f0\u540e\u6dfb\u52a0.html<\/code>\u3002<\/p>\n<\/p>\n
\u4e8c\u3001\u52a8\u6001\u8def\u7531\u5904\u7406<\/h3>\n<\/p>\n
\u5bf9\u4e8e\u52a8\u6001\u8def\u7531\uff08\u5982pages\/_slug.vue<\/code>\uff09\uff0c\u5982\u679c\u8981\u6dfb\u52a0.html<\/code>\u540e\u7f00\uff0c\u8fd8\u9700\u8981\u5728extendRoutes<\/code>\u4e2d\u8fdb\u4e00\u6b65\u5904\u7406\u3002<\/p>\n<\/p>\n
export default {<\/p>\n
  router: {<\/p>\n
    extendRoutes(routes, resolve) {<\/p>\n
      for (let i = 0; i < routes.length; i++) {<\/p>\n
        if (routes[i].name === 'slug') {<\/p>\n
          routes[i] = {<\/p>\n
            ...routes[i],<\/p>\n
            path: '\/:slug.html',<\/p>\n
            component: routes[i].component<\/p>\n
          };<\/p>\n
        }<\/p>\n
      }<\/p>\n
    }<\/p>\n
  }<\/p>\n
}<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u4e09\u3001\u751f\u6210\u89c4\u5219\u4fee\u6539<\/h3>\n<\/p>\n
\u5f53\u4f60\u6267\u884cnuxt generate<\/code>\u6765\u9884\u6e32\u67d3\u4f60\u7684Nuxt\u5e94\u7528\u65f6\uff0c\u53ef\u80fd\u9700\u8981\u5bf9\u751f\u6210\u7684\u6587\u4ef6\u8def\u7531\u8fdb\u884c\u8fdb\u4e00\u6b65\u5b9a\u5236\u3002<\/p>\n<\/p>\n
export default {<\/p>\n
  generate: {<\/p>\n
    subFolders: false, \/\/ \u751f\u6210\u6587\u4ef6\u800c\u975e\u6587\u4ef6\u5939<\/p>\n
    routes: function () {<\/p>\n
      return axios.get('https:\/\/my-api\/posts')<\/p>\n
        .then((res) => {<\/p>\n
          return res.data.map((post) => {<\/p>\n
            return '\/posts\/' + post.id + '.html';<\/p>\n
          });<\/p>\n
        });<\/p>\n
    }<\/p>\n
  }<\/p>\n
}<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u56db\u3001\u5904\u7406\u5237\u65b0404\u9519\u8bef<\/h3>\n<\/p>\n
\u5f53\u76f4\u63a5\u8bbf\u95ee\u6dfb\u52a0\u4e86.html<\/code>\u540e\u7f00\u7684\u9875\u9762\u65f6\uff0c\u4f60\u53ef\u80fd\u4f1a\u9047\u5230404\u9519\u8bef\u3002\u89e3\u51b3\u8fd9\u4e00\u95ee\u9898\u9700\u8981\u670d\u52a1\u5668\u7aef\u7684\u914d\u7f6e\u914d\u5408\u3002<\/p>\n<\/p>\n