Nuxt学习（vue项目移植）

江河地笑

已于 2022-03-01 20:03:31 修改

阅读量2.3k

点赞数 3

分类专栏： SEO 文章标签： javascript vue.js 开发语言

于 2022-02-05 23:11:28 首次发布

本文链接：https://blog.csdn.net/qq_59068750/article/details/122784392

版权

SEO 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

自己的网站随着时间，已经上了百度排名

南京市江宁区金瑞祥贴金工艺厂

关键词：贴金箔

jrxtiejin.com

jinruixiang.top

1.简单创建Nuxt项目

首先配置全局nuxt脚手架

npm install -g create-nuxt-app

在你想要的目录下创建nuxt项目

npx create-nuxt-app seo

我选择的如下

这是一个插件，类型于message（element-ui）,安装如下

npm install @nuxtjs/toast

然后在config配置

  plugins: [
    { src: "~/plugins/ElementUI", ssr: true },
    { src: '~/plugins/main', ssr: true },
    { src: "@plugins/vue-quill-editor", ssr: false },

  ],

2.vue迁移nuxt

具体细节不说了，我就是参考如下链接，有效

vue-cli3整体迁移至服务端渲染nuxtjs

vue项目改造nuxt 利于seo - BlancheWang - 博客园

vue-cli3整体迁移至服务端渲染nuxtjs - 古兰精 - 博客园

我选择的是把根目录变成src那个方案

附上我的nuxt.config.js和目录结构参考

export default {
  server:{
    port:3000,
    host:'0.0.0.0'
  },
  srcDir: 'src/',
  mode: 'universal',
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '金瑞祥贴金首页-专业贴金箔-贴金箔价格-大理石刻字[不满意不收费]',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '「经营范围～地道」:【贴金装潢】｜【佛像贴金】｜【大理石贴金】｜【大理石刻字】｜【庙宇装潢】｜【酒店贴金】｜【金字招牌】｜【网站工程】 「十年老厂」 「联系电话」:13951638402"' },
      {hid:'keywords',name:'keywords',content:'贴金箔,刻字,佛像贴金,公司门牌,贴金工艺'},
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '~/static/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "element-ui/lib/theme-chalk/index.css",
    "~/assets/css/global.css",
    '~/assets/font/iconfont.css',
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/ElementUI", ssr: true },
    { src: '~/plugins/main', ssr: true },
    { src: "@plugins/vue-quill-editor", 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/toast',
    '@nuxtjs/axios',
    '@nuxtjs/router'
  ],
  toast: {
    position: 'top-center',
    duration: 2000
  },
  axios: {
    proxy: true, //开启代理
    credentials: true, //跨域请求需使用凭证
  },
  proxy: [
    ['/api', {
      target: 'http://127.0.0.1:9000', // (后端请求地址)
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }]
  ],
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

对应目录结构如下

3.nuxt学习

推荐链接，觉得不错，不是每个知识点都测过

值得注意一点就是：created里面调用this.$content.xxxx.xxx（定义的类似于常量的）

如果那个main.js文件没有被ssr:true那么，就无法获取this.$content.xxxx.xxx

  plugins: [
    { src: "~/plugins/ElementUI", ssr: true },
    { src: '~/plugins/main', ssr: true },
    { src: "@plugins/vue-quill-editor", ssr: false },
  ],

nuxt搭建高能SEO商城（一） - 知乎

上面这个值得注意一点就是asyncData用法

https://www.jb51.net/article/166900.htm

上面的知识点不少

4.配置nuxt在linux中的运行环境

4.1node

在linux中下载node，跟着步骤不会报错的，路径都可以成功

wget https://npm.taobao.org/mirrors/node/v14.15.4/node-v14.15.4-linux-x64.tar.xz

解压

xz -d node-v14.15.4-linux-x64.tar.xz
tar -xvf node-v14.15.4-linux-x64.tar

软链接

ln -s /usr/local/node-v14.15.4-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v14.15.4-linux-x64/bin/npm /usr/local/bin/npm

node -v

pm2安装

ln -sf /usr/local/node-v14.15.4-linux-x64/bin/pm2 /usr/local/bin/pm2

pm2 list

简单操作

查看当前守护进程 :pm2 list
停止所有的应用程序：pm2 stop all
停止某个应用程序：pm2 stop id
重启所有应用程序：pm2 restart all
关闭并删除所有应用：pm2 delete all
删除指定应用：pm2 delete id

4.2nginx

nginx安装搭建Nginx服务器_江河地笑的博客-CSDN博客

ftp资源服务器那，可以不配，直接放在文件里也可以

ftp资源服务器搭建FTP资源服务器_江河地笑的博客-CSDN博客

只需要改点nginx.conf，代码如下

# nuxt start
upstream nuxttest{ #分配需要代理的服务
    server localhost:3000; #代理本地的nuxt服务
}
server {
  listen 80;
  server_name jinruixiang.top; #你的域名

  location / {
   proxy_pass http://nuxttest; # 代理upstream模块(这里不能直接代理端口否则_nuxt文件目录无法找到)
   index index.html index.htm;
   # try_files $uri $uri/ /index.html; #解决页面刷新404问题
  }
        # 这边是我配置的ftp资源服务器，搭建在我博客里
 location /files {
	alias  /home/user-file/files;
  }

}
# nuxt end

5.部署在linux服务器

首先把前端nuxt项目下的几个文件放到linux中，放在一个文件夹下

再依次执行

npm install

npm start (属于一关闭服务器就打不开网站了)

用pm2管理（持久）：pm2 start npm --name 你项目的名称 -- run start

我后端是用springboot写的打成jar包放在服务器里是9000端口

nohup java -jar xxx.jar &

然后浏览器输入jinruixiang.top

可以了，这个nuxt我才学了一天多，还有很多不太懂的地方，如果有写错的地方，希望可以斧正！

6.ssr渲染，利于seo

优化seo基础分为两步，第一步是tdk，懂得都懂，就是标题描述关键字，Nuxt好设置呢，可以全局设置也可以局部设置,无需其他操作

全局

export default {
  server:{
    port:3000,
    host:'0.0.0.0'
  },
  srcDir: 'src/',
  mode: 'universal',
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '金瑞祥贴金首页-专业贴金箔-贴金箔价格-大理石刻字[不满意不收费]',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '「经营范围～地道」:【贴金装潢】｜【佛像贴金】｜【大理石贴金】｜【大理石刻字】｜【庙宇装潢】｜【酒店贴金】｜【金字招牌】｜【网站工程】 「十年老厂」 「联系电话」:13951638402"' },
      {hid:'keywords',name:'keywords',content:'贴金箔,刻字,佛像贴金,公司门牌,贴金工艺'},
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '~/static/favicon.ico' }
    ]
  },
}

局部

export default {

  head: {
    title: '金瑞祥贴金留言页-贴金价格留言-贴金联系方式-老板评价',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: '金瑞祥贴金经营数十年，不满意不收费，精通【贴金装潢】｜【佛像贴金】｜【大理石贴金】｜【大理石刻字】｜【庙宇装潢】'
      },{
         hid: 'keywords',
        name: 'keywords',
        content: '南京佛像贴金,公司门牌,刻字'
      }
    ],
    
  },
}

第二步是ssr服务端渲染，也就是动态页面可以提前渲染

比如我这个留言页面，如果我不进行ssr渲染，我这个div标签里面就没有留言的信息，如果我进行ssr服务端渲染，div里面就填充了从数据库获取过来的数据，如下图所示（Safari浏览器，来源标签里面的文件，div内容是处于倒数几十行）

如何做到呢？

  <div class="comment" v-for="(item, index) in comment_list" :key="index">
        <el-image
          class="header_img"
          :src="require(`@/assets/img/random_header_img/${item.headerImg}.png`)"
          alt="随机头像"
        ></el-image>

        <span class="phone">{{ item.username | mobilePhoneFilter }}</span>
        <p class="text">{{ item.content }}</p>
        <p class="time">{{ item.createTime }}</p>
      </div>

//上面这是我如何用这些数据
//下面是使用asyncData提前渲染

import axios from 'axios'
export default {
  async asyncData() {
    let  queryInfo= {
        query: "",
        pageNum: 1,
        pageSize: 6,
      }
     let rs = await axios.get("/api/comment/all", {
      params:{
            ...queryInfo
        }
    });
    return {
      comment_list:rs.data.comments,
      total:rs.data.total
    };
  },
}

然后给大家整个更复杂点，比如是文章列表页面，点击文章标题进入详情，这里采用的是路由传参id嘛，既然asyncData无法获取this.route。。。就用asyncData中的context

export default {
  async asyncData(context) {
    console.log(context.params.id);
    let rs = await axios.get("/api/article/articleDetails", {
      params: {
        id: context.params.id,
      },
    });
    let article = rs.data.article;
    let nextArticle = {};
    let preArticle = {};
    if (rs.data.nextArticle !== null) {
      nextArticle = rs.data.nextArticle;
    } else {
      nextArticle.title = "已经是最后一篇了";
    }
    if (rs.data.preArticle !== null) {
      preArticle = rs.data.preArticle;
    } else {
      preArticle.title = "已经是第一篇了";
    }
    return {
      article: article,
      nextArticle: nextArticle,
      preArticle: preArticle,
    };
  },

对应实现的网站是金瑞祥贴金首页-专业贴金箔-贴金箔价格-大理石刻字[不满意不收费]

希望可以给大家带来帮助，喜欢就点个赞吧