现有vue-cli项目做SEO迁移到nuxt.js下

小咪咪 2023-01-02 07:26 143阅读 0赞

## 现有vue-cli项目做SEO迁移到nuxt.js下 ##

## 1 . 简单描述一下以下几个概念 ##

**1 . SPA** ： (single page web application，**SPA**)单页面应用，基于vue框架开发的项目很多都属于单页面应用；

**2 . SSR**：server side rendering，服务端渲染，网页是通过服务端渲染生成后输出给客户端，SSR特点：众所周知使用SSR是为了优化SEO；

**3 . SEO**： 搜索引擎优化，指通过对网站进行站内优化、修复和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。（简单说就是网页上的关键词更容易搜索到你的网页）；

**4 . Prerender**： 预渲染，Prerender.io是基于Node.js的程序，它可以让你的JavaScript网站支持搜索引擎，社交媒体，并且它兼容所有的JavaScript框架和库。它采用PhantomJS渲染JavaScript的网页然后呈现为HTML。此外，我们可以实现的prerender服务层来缓存访问过的页面，这将大大提高性能；

**5 . Nuxt**： 是一个基于 Vue.js 的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置，可以为基于 Vue.js 的应用提供生成对应的静态站点的功能。

## 2 . vue-cli项目做SEO迁移到nuxt.js步骤 ##

**1 .把vue-cli项目里的`src`目录下的所有页面文件全都复制到`nuxt`的pages文件里**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]  
**2 . 把vue-cli项目里的`src`目录下的`components`组件全都复制到`nuxt`的`components`文件里**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70 1]  
**3 . 同理src目录下的静态文件如，图片，字体等`assets`文件夹下的东西，全都复制到`nuxt`里的`assets`**

**之后很多第三方库，css，less，js文件都在`nuxt`的`nuxt.config.js`中配置**

export default { 
      // Global page headers (https://go.nuxtjs.dev/config-head)
      head: { 
        title: "蝴蝶旅游",
        meta: [
          {  charset: "utf-8" },
          {  name: "viewport", content: "width=device-width, initial-scale=1" }
        ],
        // link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
        script: [{  src: "/mobileOrComputer.js" }]
      },
      router: { 
        // base: "/homePage"
      },
      // Global CSS (https://go.nuxtjs.dev/config-css)
      css: ["./styles/public.css"],
    
      // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
      plugins: [],
    
      // 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: ["@neneos/nuxt-animate.css"],
    
      // Build Configuration (https://go.nuxtjs.dev/config-build)
      build: { }
    };

**有几点需要注意的点**

**1 . 项目文件都迁移过来之后，你之前项目的所有依赖记得重新下载并引用一下，比如什么`animate.css`库，`less`之类的**

**2 . nuxt框架本身里面有一些默认的样式，记得注释或者删掉**

**3 . 启动项目`start`不行的话记得用`dev`，打包`build`不行的话，用`generate`**

"scripts": { 
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]: /images/20221120/9df82758bdea4fa5bc87b08c90c1c436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70 1]: /images/20221120/19fbd87db9bd46328e9357d5e28f6de4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70 2]: /images/20221120/47e7cf7d6aba42e8b615d7757f6d7f5a.png