NuxtJs项目实战经验分享

Nuxt.js 项目总结 v2

Nuxtjs 版本 Version: 2.15.8

目录结构

名称	作用
assets	静态文件目录例如: css,font
components	自定义组件目录
layouts	布局目录
middleare	中间件目录
pages	页面目录
plugins	插件目录
nuxt.config.js	整个项目配置目录
store	状态管理目录
static	不需要编译的静态文件目录
pm2.config.js	项目部署关键文件

图片展示

---

尽可能把不需要编译的图片放到 static 目录下
例如: logo, 小图标

Axios 接口请求

---

使用 plugins 插件的方式注册全局 接口,

项目部署

---

上传关键文件

• .nuxt
• static
• package.json
• nuxt.config.js
• pm2.config.json
• yarn.lock

关闭 Axios 代理 (找不到代理地址问题)

• 避免项目运行找不到代理地址问题

项目部署

---

在项目目录下创建 pm2.config.json 文件和logs目录

{
  "apps": [
    {
      "name": "app",
      "script": "yarn",
      "args": "start",
      "cwd": "./",
      "watch": ["src", "build"],
      "ignore_watch": ["node_modules", "logs", "public"],
      "out_file": "./logs/out.log",
      "error_file": "./logs/err.log",
      "merge_logs": true,
      "log_date_format": "YYYY-MM-DD HH:mm Z"
    }
  ]
}

pm2 运行项目

运行项目

pm2 start pm2.config.json

保存上一步的项目 下次可以 pm2 list 查看项目列表方便启动

pm2 save

依赖包使用

nuxtjs项目中大多数依赖都是通过插件的方式引入的
需要在 plugins 目录下创建对应的js文件
例如: 引入element-ui.js

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

全局接口/工具方法也是在这里引入
例如: api.js

export default ({ $axios, store }, inject) => {
  inject('api', {
    // 注册
    register: params => $axios.post('/api/register', params),
    // 登录
    login: params => $axios.post('/api/login', params),
  })
}

最后在 nuxt.config.js文件中写入对应的文件路径

 plugins: [
    { src: '~/plugins/element-ui', ssr: true },
    '~/plugins/axios',
    '~/plugins/api',
  ],

关于 Vuex 刷新缓存问题

可以使用 nuxt-vuex-localstorage 辅助完成,实现页面刷新也能不丢失数据, 使用非常简单
需要在对应的 store 目录下使用名称相同的文件 page.js, user.js
这里配置了 页面相关数据和用户信息的缓存

modules: [
    '@nuxtjs/axios',
    [
      'nuxt-vuex-localstorage',
      {
        expireHours: 12,
        localStorage: ['page'],
        sessionStorage: ['user'],
      },
    ],
  ],

---

未完结后续有空会更新…