nuxt 实现vue项目打包成静态页面

前端 vue nuxt

nuxt.config.js引入接口执行包

import axios from 'axios'

nuxt打包为静态页面后访问具体的页面时，第一次能正常跳转，第二次刷新时则报404，是因为nuxt在generate没有将相关的id添加到路由中去，需要在nuxt.config.js中配置动态获取路由

generate: {
      async routes() {
        var routess = [];
            await axios.get('http://域名/gzfw/').then(res => {

              res.data.data.forEach(obj => {
                routess[routess.length] = '/collectiondsplaydetail/' + obj.id;
              })
            })
            await axios.get('http://域名/gzfw/api/').then(res => {
              res.data.data.forEach(obj => {
                routess[routess.length] = '/exhibitiondetil/' + obj.id;
              })
            })

            await axios.get('http://域名/gzfw/api/').then(res => {
              res.data.data.forEach(obj => {
                routess[routess.length] = '/socialeducationActivitiesdetill/' + obj.id;
              })
            })
            await axios.get('http://域名/gzfw/api/').then(res => {
              res.data.data.forEach(obj => {
                routess[routess.length] = '/new/' + obj.id;
              })
            })
            return routess;
          }
    },

配置跨域

proxyTable: {
     '/gzfw': { target: 'http://域名', ws: false,pathRewrite: { '^/api': '' } }
  },
  modules: [
    '@gauseen/nuxt-proxy',
  ],

本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2022-08-09 22:48:07