• 0

  • 484

  • Favorite

nuxt服务端渲染

2 months ago

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日志查看

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

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

物联网

484

Relevant articles

未登录头像

No more data