使用nuxt对h5官网实现静态化处理seo，generate打包路由动态参数传参

谁践踏了优雅 2024-03-02 06:37 6阅读 0赞

## 静态化处理什么意思 ##

静态化处理是指将动态生成的网页内容转化为静态的HTML文件，以提高网站性能和访问速度。通常情况下，动态网页是通过服务器端脚本语言（如PHP、ASP、JSP等）生成的，每次用户访问都需要服务器进行处理和生成页面。而静态网页则是事先生成好并保存在服务器上的HTML文件，用户访问时直接获取这些静态文件，无需服务器再进行处理。通过静态化处理可以减轻服务器的负载，并提供更快的响应速度和更好的用户体验。同时，静态化的网页也更易于缓存和分发，能够更好地应对高并发的请求。

## 实现方法 ##

使用静态页面生成器，如`Nuxt.js`，可以将Vue官网的动态内容生成为静态的HTML文件。Nuxt.js是Vue.js的官方静态网站生成器，它可以帮助你构建一个基于Vue.js的静态网站。通过Nuxt.js，你可以将Vue官网的路由、组件和页面渲染为静态文件。

## 代码展示 ##

1.  首先自己搭建好一个nuxt项目，需要安装create-nuxt-app脚手架。具体步骤在官网（[https://www.nuxtjs.cn/guide/installation][https_www.nuxtjs.cn_guide_installation]）
2.  最主要的文件`nuxt.config.js`，网络请求直接用的nuxt自带的axios，用法和普通网络请求一样，如果想要代码实现静态化，需要在`asyncData`或者`fetch`中请求。

async fetch() {
        
       // 青柚
       await this.getQingYouList();
       // 蜜柚
       await this.getMiYouList();
       // 红柚
       await this.getHongYouList();
     },
    
    // 青柚系列
        async getQingYouList(type) {
        
          var search = Object.assign({
        }, this.qingYouQuery);
          await this.$axios
            .post("/api/ynzh/user/goods/getGoodsList.do", {
        
              data: search,
            })
            .then((res) => {
        
              const {
        
                code,
                data: {
         goodsList, totalCount },
              } = res.data;
              if (code == 1) {
        
                if (type != "more") {
        
                  this.qingYouList = goodsList;
                  this.qingYouTotal = totalCount;
                } else {
        
                  this.qingYouList = [...this.qingYouList, ...goodsList];
                  this.qingYouTotal = totalCount;
                }
              }
            });
        },

1.  路由就很简单，和目录结构有关。组件直接用，`文件名/index.vue`是一个页面格式。如果是有参数接受的页面。例如详情页命名就要用`_xxx`（下划线开头，例如\_goodsId，goodsId是参数的名字）,接收参数直接`this.$route.params.goodsId`就可以拿到。
2.  需要注意的一个点，就是路由跳转的时候名称前面必须有`/`，就因为这个原因我找了好久问题，打包的静态代码老是跳转错误。跳转方式我用的两种，一种是nuxt的nuxt-link，一种是a标签跳转，都可以，传参方式也有很多种，我是用的这种

<nuxt-link :to="{ path: '/goodDetails/' + item.goodsId }">
     <img :src="item.goodsImage" alt="" />
    </nuxt-link>
    
    <a
     :title="item.goodsName"
     :href="'/goodDetails/' + item.goodsId"
    >
    <img :src="item.goodsImage" alt="" />
    </a>

1.  再就是head配置，除了全局文件里面可以改，在单独的页面也可以设置

export default {
        
    head() {
        
        return {
        
          title: "内容", // 设置页面标题
          meta: [
            {
         hid: 'description', name: 'description', content: '内容！' },
            {
         hid: 'keywords', name: 'keywords', content: '内容' },
          ]
        }
      },
    }

1.  `nuxt.config.js`

const axios = require('axios')
    export default {
        
      // Global page headers: https://go.nuxtjs.dev/config-head
      target: 'static',
      head: {
        
        title: 'nuxt-test',
        htmlAttrs: {
        
          lang: 'en'
        },
        meta: [
          {
         charset: 'utf-8' },
          {
         name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {
         hid: 'description', name: 'description', content: '' },
          {
         name: 'format-detection', content: 'telephone=no' },
          {
         name: 'robots', content: 'noindex, follow=no' },
          {
         name: 'baidu-site-verification', content: 'codeva-4SFdCKKzLE' },
          {
         name: 'sogou_site_verification', content: 'xMqy0F3Ghi' },
          {
         name: '360-site-verification', content: '55ef7eed35cc5eea6a26800cecaf5fdd' },
        ],
        link: [
          {
         rel: 'icon', type: 'image/x-icon', href: '/img/favicon.ico' },
          {
         rel: 'stylesheet', href: 'https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css' }
        ],
        script: [
          {
         src: '/jquery-1.12.4.min.js', body: true },
          // { src: 'https://code.jquery.com/jquery-3.6.0.min.js',body: true },
          {
         src: '/jquery.meanmenu.min.js', body: true },
          {
         src: 'https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js' },
          {
         src: '/jquery-global.js', body: true },
        ]
      },
    
      // Global CSS: https://go.nuxtjs.dev/config-css
      css: [
        "element-ui/lib/theme-chalk/index.css",
        "@/static/css/style.css",
        "@/static/css/animate.css",
        "@/static/css/easyzoom.css",
        "@/static/css/nice-select.css",
        "@/static/css/responsive.css",
        "@/static/css/slick.css",
        "@/static/css/venobox.css",
        "@/static/css/jquery-ui.css",
        "@/static/css/bootstrap.min.css",
        "@/static/css/owl.carousel.min.css",
        "@/static/css/meanmenu.min.css",
        "@/static/css/linearicons.min.css",
        "@/static/css/font-awesome.min.css"
      ],
    
      // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
      plugins: [
        {
         src: "~plugins/main" },
        {
         src: '~/plugins/jquery.js', ssr: false }
      ],
    
      // Auto import components: https://go.nuxtjs.dev/config-components
      components: true,
    
      // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
      buildModules: [
      ],
    
      // Modules: https://go.nuxtjs.dev/config-modules
      modules: [
        '@nuxtjs/axios',
          // 是否开启跨域代理配置 根据项目酌情选择
        '@nuxtjs/proxy'
      ],
    
      axios: {
        
        // 开启允许跨域 根据项目酌情选择
        proxy: true,
        credentials: true
      },
    
      // 跨域配置 此处配置需酌情改变
    	proxy: {
        
        '/api/': {
        
          changeOrigin: true,
          target: 'http://47.106.129.189:9020', // 允许跨域的服务器地址
          pathRewrite: {
        
            '^/api/': '/'
          }
        }
      },
    
      build: {
        
        transpile: [/^element-ui/]
      },
      generate: {
        
        crawler: false,
        //routes: [
         // '/goodDetails/1',
         // '/goodDetails/2',
         // '/goodDetails/3'
        //]
         routes() {
        
          return axios.post('http://47.106.129.189:9020/ynzh/user/goods/getGoodsList.do', {
        
            data: {
        
              goodsClassifyId: "",
              pageNo: 1,
              pageSize: 1000,
            }
          }).then(res => {
        
            return res.data.data.goodsList.map(user => {
        
              return '/goodDetails/' + user.goodsId
            })
          })
        }
      }
    }

[https_www.nuxtjs.cn_guide_installation]: https://www.nuxtjs.cn/guide/installation