Nuxt.js实战：Vue.js的服务器端渲染框架

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/                # 自动生成的文件，包含编译后的代码和配置
├── assets/               # 用于存放未编译的静态资源，如CSS、图片、字体
├── components/           # 自定义Vue组件
├── layouts/              # 应用的布局文件，定义页面的通用结构
│   └── default.vue       # 默认布局
├── middleware/           # 中间件文件
├── pages/                # 应用的路由和视图，每个文件对应一个路由
│   ├── index.vue         # 默认首页
│   └── [slug].vue        # 动态路由示例
├── plugins/              # 自定义Vue.js插件
├── static/               # 静态资源，会被原样复制到输出目录
├── store/                # Vuex状态管理文件
│   ├── actions.js        # Vuex actions
│   ├── mutations.js      # Vuex mutations
│   ├── getters.js        # Vuex getters
│   └── index.js          # Vuex store入口文件
├── nuxt.config.js        # Nuxt.js配置文件
├── package.json          # 项目依赖和脚本
└── yarn.lock             # 或者npm.lock，记录依赖版本

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // 这里可以在服务器端获取数据
    // 返回的数据会作为data的默认值
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
  // ...
  router: {
    middleware: ['globalMiddleware1', 'globalMiddleware2'] // 可以是字符串数组
  }
};
中间件文件通常位于middleware/目录下，例如middleware/globalMiddleware1.js：

javascript
// middleware/globalMiddleware1.js
export default function (context) {
  // context 包含 req, res, redirect, app, route, store 等信息
  console.log('Global Middleware 1 executed');
}

// pages/about.vue
export default {
  middleware: 'pageMiddleware' // 可以是字符串或函数
};
对应的中间件文件位于middleware/目录，例如middleware/pageMiddleware.js：

javascript
// middleware/pageMiddleware.js
export default function (context) {
  console.log('Page Middleware executed');
}

// layouts/default.vue
export default {
  middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};
对应的中间件文件位于middleware/目录：

javascript
// middleware/layoutMiddleware1.js
export default function (context) {
  console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
  console.log('Layout Middleware 2 executed');
}

<!-- pages/post/[id].vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const response = await $axios.$get(`/api/posts/${params.id}`);
    return { post: response.post };
  }
};
</script>

<!-- layouts/default.vue -->
<template>
  <div>
    <header>
      <nav>
        <!-- 导航链接等 -->
      </nav>
    </header>
    <main>
      <nuxt /> <!-- 这里将插入页面内容 -->
    </main>
    <footer>
      <!-- 底部信息等 -->
    </footer>
  </div>
</template>

// pages/about.vue
export default {
  layout: 'custom' // 在layouts/下创建custom.vue
};
插件与库集成
Nuxt.js支持Vue.js的插件，你可以在nuxt.config.js中配置：

javascript
// nuxt.config.js
export default {
  plugins: [
    { src: '~plugins/vuetify.js', ssr: true },
    { src: '~plugins/vue-chartjs.js', mode: 'client' } // 仅在客户端运行
  ]
};

// plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

// nuxt.config.js
export default {
  // 项目名称
  name: 'my-nuxt-app',
  
  // 项目模式：spa, universal, static
  mode: 'universal', // 默认值，支持服务器端渲染
  
  // 应用元信息
  head: {
    title: 'My Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'App description' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  
  // CSS样式
  css: [
    '@/assets/css/main.css'
  ],
  
  // 路由配置
  router: {
    base: '/my-nuxt-app/', // 应用的基础路径
    extendRoutes(routes, resolve) {
      // 手动扩展或修改路由
    }
  },
  
  // 构建配置
  build: {
    transpile: [/^my-vue-component/], // 需要转译的模块
    vendor: ['lodash'], // 公共库，提前打包
    extractCSS: true, // 提取CSS到单独文件
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            filename: 'vendors.js'
          }
        }
      }
    }
  },
  
  // Axios配置
  axios: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000/api', // API基础URL
    browserBaseURL: 'https://api.example.com' // 客户端的API基础URL
  },
  
  // Plugins
  plugins: [
    { src: '@/plugins/vue-my-plugin', ssr: false } // 异步加载的插件，ssr: false 表示仅客户端加载
  ],
  
  // Modules
  modules: [
    '@nuxtjs/axios', // 安装并配置axios模块
    '@nuxtjs/pwa' // 安装并配置PWA模块
  ],
  
  // 环境变量
  env: {
    apiKey: 'your-api-key',
    apiUrl: 'https://api.example.com'
  },
  
  // Vuex Store配置
  store: true, // 自动创建Vuex store
  loading: { color: '#3B8070' }, // 加载指示器颜色
  
  // 服务端中间件
  serverMiddleware: [
    { path: '/api', handler: '~/api/index.js' } // 使用自定义的服务器端中间件
  ],
  
  // 静态生成配置
  generate: {
    dir: 'dist', // 输出目录
    fallback: true, // 对未预渲染的动态路由生成404页面
    routes: () => ['/about', '/contact'] // 预渲染的指定路由
  }
};

   export default {
     generate: {
       dir: 'dist', // 输出目录，默认为dist
       fallback: true, // 对未预渲染的动态路由生成404页面
       routes: () => ['/about', '/contact'], // 预定义的静态路由
       exclude: ['/admin/*'], // 排除某些路由
       interval: 5000, // 生成间隔，单位毫秒
       concurrency: 10 // 并发生成的路由数量
     }
   }

   // pages/about.vue
   export default {
     async asyncData({ params, $axios }) {
       const aboutInfo = await $axios.$get('/api/about')
       return { aboutInfo }
     }
   }

   npm install vee-validate

   export default {
     plugins: [{ src: '~/plugins/vee-validate', ssr: false }]
   };

   import Vue from 'vue';
   import VeeValidate from 'vee-validate';

   Vue.use(VeeValidate);

   <template>
     <form @submit.prevent="submitForm">
       <input v-model="email" name="email" v-validate="'required|email'"/>
       <span>{{ errors.first('email') }}</span>
       <button type="submit">Submit</button>
     </form>
   </template>
   <script>
   export default {
     data() {
       return {
         email: ''
       };
     },
     methods: {
       submitForm() {
         this.$validator.validateAll().then(result => {
           if (result) {
             // 验证成功逻辑
           } else {
             // 验证失败逻辑
           }
         });
       }
     }
   };
   </script>

   export default {
     error: {
       // 页面不存在时的处理
       pageNotFound({ error, store, app, env }) {
         // 处理逻辑
       },
       // 任何错误的处理
       handler(error, { error: nuxtError, store, app, env }) {
         // 处理逻辑
       }
     }
   };

export default {
  async asyncData({ params, error }) {
    try {
      const data = await fetchSomeData(params.id);
      return { data };
    } catch (err) {
      error({ statusCode: 500, message: '数据获取失败' });
    }
  }
};

// plugins/axios.js
import axios from 'axios';
import { toast } from '~/utils/toast';

axios.interceptors.response.use(null, (error) => {
  const { status } = error.response;
  if (status === 401) {
    // 处理未授权错误
  } else if (status >= 500) {
    // 处理服务器错误
    toast.error('服务器错误');
  }
  return Promise.reject(error);
});

export default ({ $axios }, inject) => {
  inject('axios', $axios);
};

   // store/modules/users.js
   export const state = () => ({
     users: []
   });

   export const mutations = {
     SET_USERS(state, payload) {
       state.users = payload;
     }
   };

   export const actions = {
     async fetchUsers({ commit }) {
       const response = await this.$axios.get('/api/users');
       commit('SET_USERS', response.data);
     }
   };

   // nuxt.config.js
   module.exports = {
     buildModules: [
       '@nuxt/typescript-build',
       '@nuxtjs/eslint-module' // 添加 ESLint 集成
     ],
     eslint: {
       fix: true, // 自动修复错误
       ignoreDuringBuilds: true // 忽略构建期间的错误
     }
   };

   npm install @vueuse/core

   // 在组件中
   import { useCounter } from '@vueuse/core';

   export default {
     setup() {
       const count = useCounter(0); // 使用计数器功能
       // ...
     }
   };

   // nuxt.config.js
   export default {
     plugins: [{ src: '~plugins/toastify.js', ssr: false }]
   };

   // plugins/toastify.js
   import Vue from 'vue';
   import Toastify from 'toastify-js';

   Vue.use(Toastify);