Nuxt2.x项目实战相关问题记录

一、页面引入外部文件 比如cdn

1、所有页面引入：在nuxt.config文件中，head属性中进行配置，所有页面都会引入这些文件

2、单个页面引入：在页面组件中，定义head方法即可。

head() {
    return {
    　　title: 'Nuxt牛逼',
   　　 meta: [
            {
                hid: 'description',
                name: 'description',
                content: '天苍苍野茫茫'
            }
    　　],

　　　　　　link: [ // 这里可以引入css样式

      　　　　{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },

    　　　　],

　　　　　　script: [

      　　　　{ src: 'https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js' },

　　　　　　}

    }
  }

 

二、关于@nuxtjs/axios

1、这是官方推荐的axios库，由于在nuxt.config中已经配置过，所以在页面中，可以直接使用。

2、在组件内通过this.$axios即可使用。

3、在asyncData方法中获取axios，有一个上下文参数，可以通过这个参数context.$axios,或通过解构的方式获取

三、asyncData服务端获取数据

1、在返回组件给客户端之前，会执行。所以在这个方法里面是获取不到组件this的

2、可返回一个对象，里面的属性，在组件内可以通过this直接获取

四、设置页面head

1、全局配置：在nuxt.config文件中，找到head属性配置

2、局部配置：head方法返回一个对象即可(和钩子函数同级)(参考上面第一条)

3、局部权限高于全局

五、layout布局文件使用

1、一般情况下，导航和底部每个页面都会有，虽然已经封装成组件，但每个页面引入一次还是很麻烦。使用layout就可以解决这个问题。

使用方法：根目录创建layouts/BaseLayout.vue文件，组件名称可以随意，然后在需要使用到layout模板的页面组件内，添加layout属性，值为文件名称，比如 layout: 'BaseLayout'。layout布局文件可能会存在很多个，比如A页面用到D1布局文件，B页面用到D2布局文件，所以需要在页面内通过layout属性来指定使用哪个布局文件。

六、关于page文件夹和路由

1、在nuxt中，路由是根据page文件夹里面的文件自动生成的。

1、page文件夹下创建index.vue，这代表首页

2、创建about.vue ，路由是 /about

3、嵌套路由：test/a.vue ，那么路由就是 /test/a

4、动态路由：test/_id.vue，那么路由test/1，也可以是test/2

七·、middleware中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称 (middleware/auth.js将成为 auth 中间件)。

使用：在页面组件中定义middleware属性，middleware: 'auth'。

感觉这玩意有点像vue-router的路由守卫。

注：可直接在nuxt.config中的router属性中配置，就是全局的

八、关于打包

有2种方式：build和generate

1、build生成的文件，还是一个node服务，所以需要借助node运行

2、generate生成静态文件，可以直接放服务器进行访问。但内容是静态的，一直不会改变。

遇到的一些问题：

1、bootstrap中的nav导航点击失效（未解决）

2、模块引入失败 异常处理（未解决）

3、项目部署到服务器，并且启动成功，使用的是Ip访问，但浏览器无法访问，解决方法是在nuxt.config文件中配置server属性：

server: {
    port: 3000, // default: 3000
    host: '0.0.0.0', // default: localhost,
 },