Резюме проекта Nuxt, ступившего на яму

Nuxt.js

В середине года проект, который писался на Nuxt.js несколько месяцев, наконец-то будет в сети, а это непросто.
Статья начнется с того, почему используется Nuxt.js, а затем обсудим проблемы и решения, возникающие при использовании.

текст

1. Зачем использовать Nuxt.js?

Когда веб-сайт нуждается в SEO, процесс разработки внешнего интерфейса можно условно разделить на два типа: те, кто может устанавливать внутренние шаблоны, и те, кто этого не делает.

Это очень хлопотно, если вы не знаете, как установить шаблон.Каждый раз, когда вы заканчиваете писать страницу, вы передаете ее фону для настройки.После того, как интерфейс установлен, вы должны проверить, соответствует ли стиль такое же, как и раньше, и изменилось ли оно, а затем подключиться к интерфейсу, поэтому вы часто понуждаете фон.

Теперь, когда пропагандируется разделение фронтенда и бэкенда, как нам не только реализовать разделение фронтенда и бэкенда, но и реализовать SEO-оптимизацию?

Спасибо ребята за созданиеvue-server-rendererПлагин, конкретное использование которого можно найти в руководстве, приведенном на официальном сайте.

Кратко опишите принцип работы плагина в одном предложении: поместите запрос данных для отображения на слой узла для обработки, а затем прочитайте файл конфигурации соответствующей страницы и выведите данные на страницу.


Теперь, когда у меня есть этот плагин, зачем мне его использовать?Nuxt.js  ?        

Потому что, когда плагин используется для построения рендеринга на стороне сервера, горячее обновление файла не может быть разрешено, что приводит к сбою всей работающей программы.вопрос

Переключиться с формы SPA на Nuxt.js можно легко и без особых трудностей, если вы внимательно прочитали официальную документацию.

PS: если Baidu не может найти ответ, вы можете перейти на github Nuxt.js, чтобы увидетьissue , вы можете найти ответ, который хотите, здесь, этот метод действительно очень полезен.

Базовое приложение и конфигурация    

Создать проект


        

Конфигурация проекта, которую я выбрал:
       

  • Сервер: Koa // Если вы хотите выполнять некоторые операции на уровне узла, выберите структуру узла, чтобы она была более гибкой.

  • Платформа пользовательского интерфейса: нет

  • Тестовая среда: шутка

  • Режим Nuxt: универсальный // Это рендеринг на стороне сервера, в режиме SPA нет рендеринга на стороне сервера.

  • Использование встроенного Axios

  • Использование ЭсЛинт


       

переменная среды

В реальном проекте есть локальная, тестовая, полутоновая, производственная и другие среды.@nuxtjs/dotenv Может помочь нам легко управлять переменными среды    


Установить
npm i @nuxtjs/dotenv -s

Создайте новый файл с именем.envФайл также может называться другими именами (.env — это имя файла, читаемое по умолчанию, вы можете проверить официальную документацию для получения дополнительных поз)

нужно идтиnuxt.config.js Настройте модуль модулей в


   

nuxt.config.js     

module.exports = {

    modules: [

        ['@nuxtjs/dotenv'] //这里没有做其他参数传入，会默认读取目录下的.env文件，如果是叫prod.env,应该写成['@nuxtjs/dotenv', { filename: '.env.prod' }]

  ],

}

Возьмите baseUrl в качестве примера:

DEV_BASE_URL = 'http://xxx.cn'

TEST_BASE_URL = 'https://xxx.cn'

PROD_BASE_URL = 'https://xxx.cn'

package.json  Настройте команду сценария запуска, чтобы добавить переменную BASE.     

{
    "scripts":{
        "dev": "cross-env NODE_ENV=development BASE=dev nodemon server/index.js --watch server",
        "build-test": "cross-env NODE_ENV=production BASE=test nuxt build", 
        "start-test": "cross-env NODE_ENV=production BASE=test node server/index.js",
        "build": "cross-env NODE_ENV=production BASE=prod nuxt build", 
        "start": "cross-env NODE_ENV=production BASE=prod node server/index.js",
        "generate": "nuxt generate"
    }
}

nuxt.confug.js 
require('dotenv').config()
let baseUrl = ''
switch (process.env.BASE) {
  case 'dev':
    baseUrl = process.env.DEV_BASE_URL
    break;
  case 'test':
    baseUrl = process.env.TEST_BASE_URL
    break;
  case 'prod':
    baseUrl = process.env.PROD_BASE_URL
    break;
  default:
    baseUrl = process.env.PROD_BASE_URL
    break;
}

module.exports = {
  env: {
     baseUrl: baseUrl,  //  全局注入环境变量baseUrl，访问 process.env.baseUrl
  }
}

асинхронный запрос

Официально рекомендуется использовать@nuxtjs/axios, хотя некоторые API-интерфейсы axios отсутствуют, настоятельно рекомендуется, так что не наступайте на эту яму.
   

   

Но я долго искал, и он не сказал мне, как инкапсулировать его в проекте. Можно ли написать все интерфейсы в плагинах для глобальной инъекции?эммм,Поэтому я снова использовал axios.Пожалуйста, дайте мне знать, если вы знаете.    


   

метод асинхронных данных

Рендеринг на стороне сервера выполняет этот метод, и в этот метод помещается запрос инициализации данных страницы, требующей SEO.

должны знать о том,asyncDataМетод может выполняться только в компоненте страницы, добавлять его в компонент макета и субкомпонент бесполезно, данные субкомпонента можно передавать только через пропсы, если вы хотите SEO.

Напишите это:

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

Эй, почему не могут выйти данные страницы не спрашивайте, добавьте асинхронность и ждите

export default {  
    async asyncData ({ params }) {    
        const { data } = await axios.get(`https://my-api/posts/${params.id}`)    
        return { title: data.title }  
    }
}

Давайте посмотрим, работает ли это.


Здесь следует отметить, что рендеринг страницы выполняется после asyncData, если сюда написать несколько интерфейсных запросов без оптимизации, то время белого экрана страницы будет очень долгим~

Чтобы повысить эффективность рендеринга, мы должны сократить время этого запроса. Здесь нам нужно, чтобы фоновые студенты сотрудничали, чтобы объединить несколько интерфейсов в один интерфейс. Мы также можем использоватьaxios.all (похож на promise.all)одновременные запросы. не забудьте написатьcatchПоймать исключение.


Вот еще одно предложение на заметку:
asyncData is called every time before loading the page component and is only available for such. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives the context object as the first argument, you can use it to fetch some data and return the component data.

Plugins

Официальный сайт говорит следующее:

Nuxt.js позволяет запускать плагины js перед запуском приложения Vue.js. Это особенно полезно, когда вам нужно использовать собственную библиотеку или сторонние модули.


Это означает, что здесь записывается функция или значение свойства и вводится в экземпляр Vue (на стороне клиента), в контекст (на стороне сервера) или даже в хранилище (Vuex). Вы можете использовать значение функции или свойства, которое вы пишете в этих местах.


Например, добавьте подключаемый модуль с информацией об уведомлениях (то же самое относится и к пользовательским глобальным компонентам).

После установки плагина перейдите наplugins Добавить файлы в каталогvue-notifications.js:

import Vue from 'vue'
import VueNotifications from 'vue-notifications'
​
Vue.use(VueNotifications)

существует nuxt.config.js  Нужно настроить плагины в     

export default {
  plugins: [
     { src: '~/plugins/vue-notifications', ssr: false }  
  ]
}

Системные плагины, не поддерживающие ssr, используются только в браузерах и могут быть добавлены после плагина.ssr:false настраивать

С личной точки зрения, сюда не рекомендуется вводить большое количество плагинов, иначе пакет получится довольно большим.
В своем проекте я в основном использую его для регистрации глобальных фильтров и глобальных компонентов, плагины других страниц пытаются использовать их везде, где они есть.


Ошибка при использовании плагина импорта в компоненте: объект Window или Document не определен?

Когда я увидел эту проблему при использовании плагина даты в компоненте, я догадался: скрипт компонента выполняется на стороне сервера (уровень узла)? Это нормально удалить
   

Официальная документация - "Общая проблемаРешение можно найти в .

Перед изменением: 
import * as lang from "vuejs-datepicker/src/locale/index.js";
import Datepicker from "vuejs-datepicker";
После изменения: 
let lang = null, Datepicker = null; 

if (process.client) { 
 lang = require("vuejs-datepicker/src/locale/index.js")["zh"];//只引入中文的语言包
 Datepicker = require("vuejs-datepicker/dist/vuejs-datepicker.js")
}

css-препроцессор

Я использую синтаксис less.Для удобства мне не нужно каждый раз импортировать его, поэтому глобальные переменные инъекции и миксины не нужно каждый раз импортировать.Для этого можно использовать @nuxtjs/style-resources.
   

Установить     

npm i @nuxtjs/style-resources --save--dev

настроить    

nuxt.config.js :     

module.exports = {
    modules: [
        "@nuxtjs/style-resources"
    ],
    styleResources: {
        less: [
            "./assets/scss/variable.less" // 务必使用相对路径，这里不能用@跟~
        ]
    },
}

АСД

На официальном сайте есть понятие промежуточного ПО в маршрутизации, определение даноТакова, что:    

Промежуточное программное обеспечение позволяет определить пользовательскую функцию, которая будет выполняться до отображения страницы или набора страниц.

Почему это определение очень похоже на навигационную защиту?

Да, их роль аналогична, разница в том, что это промежуточное ПО.Вызывается как на стороне сервера, так и на стороне клиента. Вы также можете вызвать промежуточное ПО отдельно на странице

1.nuxt.config.js全局配置:
export default {
...
  router: {
    middleware: 'stats'
  }
}
2.pages/index.vue在页面中单独配置:
export default {
  middleware: ['auth', 'stats']
}

Вы можете попробовать следующее в своем проекте, чтобы понять это предложение.


в проектеmiddleware/auth.jsMedium печатает пользовательский агент в заголовке вашего запроса

export default function (context) {
 context.userAgent = process.server ? context.req.headers : navigator.userAgent;
 console.log(context.userAgent)
}

увидим:

-Вход на страницу в первый раз / Обновление страницы / Переход на новую вкладку, userAgent будет печатать на консоли

-Текущий маршрут прыжка в окно, userAgent будет напечатан в консоли браузера.

В этом случае мы можем сделать здесь проверку авторизации и перехват маршрутизации.

Хранение токенов

Веб-сайты на стороне ПК обычно являются многостраничными, а не спа-режимом, поэтому не рассматривайте возможность использования Vuex для доступа.

Чтобы синхронизировать данные на нескольких страницах, рассмотрите возможность их хранения вlocalstorage, браузер также предоставляет соответствующие API для мониторинга.Документация MDN

window.addEventListener("storage", function(e) { 
 
});

Обратите внимание:

  • Требуется сервер, тестирование статической страницы не дает результата

  • Должно быть одно и то же происхождение (если вы хотите использовать его в разных доменахpostMessage, но будут проблемы с безопасностью)

  • Страницы могут получать уведомления только от других страниц


Если вы хотите избавить себя от проблем, вам нужно перейти к интерфейсу запроса, чтобы получить токен, когда он вам нужен, нет проблем ~

   

Оптимизация упаковки

После упаковки vendors.app.js больше 4M, слишком много. Дай мне посмотреть, кто из младших братьев что-то делает, и включу анализ.

nuxt.config.js 

export defualt{
    build: {
        analyze: true, 	// 开启打包分析
    }   
}

npm run buildКак только пакет будет завершен, он автоматически откроет страницу в браузере.

Проблема очевидна, приступайте к оптимизации: Алиюн загружает SKD-счета для массовой, динамической загрузки и где используются другие плагины, где они добавляются.

После замены всего заново:

Снова откройте gzip, все готово

Если в проекте используется UI-фреймворк, рекомендуетсянагрузка по требованиюили пойтиCDN

Как эффект первого экрана?

приди и посмотриperformanceрезультат

Между скоростью рендеринга и исходным фоновым рендерингом практически нет разрыва, и нет долгого ожидания белого экрана.


Продолжение следует

  • Захват исключений, отчеты об ошибках, мониторинг этого аспекта

  • Как добавить в проект машинопись (это тоже яма, почти не вылезти)

  • Проведите небольшой автоматический тест

  • ...


   

Суммировать

Английская документация Nuxt.js действительно содержит больше информации, чем китайская версия.Некоторые части китайского перевода странные и семантика непонятна.Лучше прочитать его английскую документацию.

Фреймворк относится к «соглашению о конфигурации», если вы используете его первымvue-server-rendererПосле повторной сборки плагина будет более тщательно использовать этот фреймворк снова.

От обучения до мелкомасштабного тестирования, до запуска масштабных проектов прошел почти год, а некоторые ямы забываются, наступив на них.

Приветствую всех, чтобы оставить сообщение~

Категории