现有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文件里
在这里插入图片描述
2 . 把vue-cli项目里的src目录下的components组件全都复制到nuxt的components文件里

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

扫描二维码关注公众号，回复： 12678247 查看本文章

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

在这里插入图片描述