nuxt服务端渲染

爱吃紫苏的乌龟
2,744 阅读3分钟

nuxt基础教程，看这一篇就够了

前言：如果你的项目是门户类型，需要SSR做服务端渲染，或者对SEO有需求，那么使用nuxt是一个不错的选择。这里关于服务端渲染的好处，就不过多阐述了，有需求的朋友直接开始饮用吧。^_^

1、饮用方式

1）安装：确保安装了npx（npx在NPM版本5.2.0及以上版本默认安装）

	npx create-nuxt-app <项目名>

或者使用yarn

	yarn create nuxt-app <项目名>

这时它会让你进行一些选择:

1.在集成的服务器端框架之间进行选择:

  **None (Nuxt 默认服务器)**

  **Express**

  **Koa**

  **Hapi**

  **Feathers**

  **Micro**

  **Fastify**

  **Adonis (WIP)**

2.选择您喜欢的 UI 框架:

  **None (无)**

  **Bootstrap**

  **Vuetify**

  **Bulma**

  **Tailwind**

  **Element UI**

  **Ant Design Vue**

  **Buefy**

  **iView**

  **Tachyons**

3.选择您喜欢的测试框架:

  **None (随意添加一个)**

  **Jest**

  **AVA**

  **4.选择你想要的 Nuxt 模式 (Universal or SPA)**

  **5.添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。**

  **6.添加 EsLint 以在保存时代码规范和错误检查您的代码。**

  **7.添加 Prettier 以在保存时格式化/美化您的代码。**

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

  首先切换到你的项目路径下： 
  $ cd <project-name>

  接着可以直接运行跑起来：
  $ npm run dev

2、目录结构

1) assets: 资源目录，用于组织未编译的静态资源

2) components: 组件目录

3) layouts: 布局目录

4) middleware: 中间件目录

5) pages: 页面目录

6) plugins: 插件目录

7) static: 插件目录，会被直接映射到根目录下，可以放置favicon.ico/robots.txt等文件

8) store: 用于组织应用的vuex状态树文件

9) nuxt.config.js: 个性化配置文件

需要注意的点：

1.nuxt的路由配置是自己生成的，如果你在pages路径下新建一个home文件，home.vue，那么他会自动生成/vue的路由，这个路由不需要像常规vue项目那样去做配置，比如本地直接localhost:3002/home即可访问

2. layouts目录下面的default文件生成时会有一个Nuxt组件，该组件是一个入口组件，对应pages目录下index.vue文件，当你切换路由时，该页面的其他组件不发生变化，比如如图里面的Header,Fotter.相当于固定模板.

3、异步请求数据

1.这一点尤为重要，官方推荐使用他们自己封装的http组件 @nuxt/axios 并且新增了asycData生命周期函数，asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。

  asyncData({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`).then(res => {
      return { title: res.data.title }
    })
  }

需要注意的是，在asyncData里面获取不到this实例，因为这个时候他还没有实例化，怎么办呢？其实被调用时的第一个参数可以用起来，他被设定为当前页面的上下文对象

这里return的title就可以直接在html中使用了

  <template>
    <h1>{{ title }}</h1>
  </template>

恭喜你，到这里你就可以从后端拿到数据，开发自己的页面了

4、请求环境变量配置

实际开发中会有开发、测试、生产等环境，那么在nuxt中，那么在nuxt中我们如何用代码去区分它们呢，可以使用 cross-env 插件，告别每次打包时繁琐的if else判断

1.安装cross-env

yarn add cross-env

2.配置package.json文件

NODE_ENV是变量，需要在nuxt.config.js里面配置，不然别人也不认识它呀

3.配置env环境变量

这里配置好了，我们就可以根据这个变量来区别我们是在什么环境，接下来要做的就是配置我们axios请求的地址了

4.配置axios的baseUrl

1）需要做的是新建一个env.js文件

接下来要做的就是引入这个env.js，并且把这里暴露出去的对象用起来

2）引入env.js，并且配置axios地址

如果你的项目使用的是@nuxt/axios，那么你需要到nuxt.config.js文件里去配置

    1.const env = require('./env')
    2.export default {
    	axios: {
          proxy: true,
          baseURL: env[process.env.NODE_ENV].BASE_API
        }
    }

到这里请求的环境变量也做好了，接下来详细讲讲nuxt.config.js这个配置文件

5、nuxt.config.js配置文件

!!! 项目的开发、资源的引入、打包上线等操作皆依靠这个文件

1.head

    head: {
      title: '页面标题',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: '我的项目', name: '我的项目', content: '智慧工业、智慧农业、物联网开发' }
      ],
      script: [
          { src: 'swiper/swiper.animate1.0.3.min.js'},
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: 'http://www.myfavicon/favicon.ico' },
        { rel: 'stylesheet', href: 'swiper/animate.min.css'}
      ]
    }
    
**1）title: 配置页面的标题**

**2) meta: 可以让爬虫爬到，有利于SEO**

**3）script: 引入js文件、插件等**

**4) link: 引入css或者其他标签**

我这里例子是引入了swiper的动画效果animate

2.css

可以引入一些自己的样式
css: [
  'swiper/css/swiper.css',
  'element-ui/lib/theme-chalk/index.css'
],
例如这里，我引入了swiper和element

3.plugins

项目的插件需要在plugins里面去配置，配置好了后在这里引入，ssr: false，不在服务端使用，以下是我用到的一些插件：

{ src:'@/plugins/axios-plugin.js' },
{ src:'@/plugins/swiper.js', ssr: false },
{ src:'@/plugins/animate.js', ssr: false },
{ src:'@/plugins/element', ssr: true },
{ src:'@/plugins/baidu.js'}

4.modules

配置好axios和style-resources这两个模块
style-resources用于解析less或者sass
'@nuxtjs/axios',
'@nuxtjs/style-resources'

5.env

环境变量
env: {
  NODE_ENV: process.env.NODE_ENV
},

6.axios

aioxs配置
axios: {
  proxy: true,
  baseURL: env[process.env.NODE_ENV].BASE_API
},

7.proxy

设置本地开发时的ip代理
proxy: {
  'api': {
    target: 'http://127.0.0.1:8102',
    changeOrigin: true
  }
}

8.build

设置一些项目打包的配置
build: {
  vendor: ['element-ui'], // 防止重复重复打包
  extractCSS: { allChunks: true }, // 去掉打包中的cs
}

9.styleResources

可以引入一些你使用的less文件，让他解析
styleResources: {
  less: './assets/less/head.less',
  less: './static/public.less'
}

6、打包部署上线

打包方式有两种

1.如果你的项目是静态页面，那么直接npm generate 会生成dist文件，和普通vue项目一样，直接把这个dist丢在服务器上即可

2.如果你的项目首页是动态的，首页的生成需要后端的数据，那么则需要运行npm run build ，打包后会有四个文件

把这四个文件丢到服务器，一个都不能少，如果你配置了env.js，那这个env.js也要丢进去，然后再npm install下载资源,最后npm start就可以在服务器上运行了

关于npm generate 和npm run build的区别

generate生成的首屏是静态的，比如你打包的时候获取到数据来渲染出的页面，那么generate后，不管你的数据怎么变化，他还是那个首屏，不会跟着数据的变化而变化。

build获取最新数据渲染

7、nginx配置

	server {
    
          listen       80;
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
                root   html;
          }
          location / {
              client_max_body_size   10m;
              proxy_pass http://localhost:3000;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection $connection_upgrade;
          }
          location ~ /(.+\.(?:gif|jpe?g|png))$ {
              expires 30d;
              root /usr/src/app-build/web/static/;
          }
        }

配置ng服务监听端口80，项目端口 3000，以及静态静态资源的访问路径,做好配置后就可以部署了

Loki Loki日志查看

到这里就结束了。<(￣▽￣)/项目搭建、环境配置、数据请求、页面开发、部署上线。基本上就是这些流程，感些各位大佬的观看。

avatar
文章
阅读
粉丝