Nuxt.js шагнул в яму Поделиться

Node.js внешний интерфейс JavaScript Vue.js

построить проблему

1. Как импортировать файлы js в голову?

фон: в<head>тег, введенный в виде встроенногоflexible.jsдокумент. Этот проект в основном представляет собой проект мобильного терминала, представляяflexible.jsОсознайте проблему адаптации мобильного терминала.

Nuxt.js черезvue-metaЧтобы добиться управления тегом заголовка, его можно найти, просмотрев документацию, которую можно настроить следующим образом:

// nuxt.config.js
head: {
  script: [
    { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
  ]
}

В результате генерируется html:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

мы обнаруживаемvue-metaИзбегайте кавычек и добавляйте__dangerouslyDisableSanitizers: ['script']После этого эти символы больше не будут экранироваться, используйте это поле с осторожностью!

Далее возьмитеconsole.log("hello")заменить содержимое наflexible.js, после обновления конфигурации:

head: {
  script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
  __dangerouslyDisableSanitizers: ['script']
}

Наступить на яму удалось, следующая яма...

2. Как использовать препроцессор

Предыстория: в компоненте<template>,<script>или<style>На вышеперечисленном используются различные препроцессоры, и после добавления процессора консоль сообщает об ошибке.

<style lang="sass">
.red
  color: red
</style>

Решение этой проблемы очень простое, просто установите эти зависимости.

npm install --save-dev node-sass sass-loader

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

3. Как использовать px2rem

Предыстория: в css напишите px, передайтеpx2rem loader, перевести px в rem

В предыдущих проектах это было черезpx2rem loaderРеализовано, но в рамках проекта Nuxt.js добавление загрузчика css пока очень трудоемко, т.к.vue-loader.

Я подумал о другом решении, вы можете использоватьpostcssиметь дело с. допустимыйnuxt.config.jsДобавьте конфигурацию в файл, или вы можетеpostcss.conf.jsдобавил в файл.

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 75 // 转换基本单位
    })
  ]
},

4. Как расширить конфигурацию веб-пакета

Предыстория: псевдоним каталога utils

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

extend (config, ctx) {
  console.log('webpack config:', config)
  if (ctx.isClient) {
    // 添加 alias 配置
    Object.assign(config.resolve.alias, {
      'utils': path.resolve(__dirname, 'utils')
    })
  }
}

5. Как добавить плагин vue

Предыстория: я сам инкапсулировал плагин toast vue, так как процесс создания экземпляра vue не виден, я не знаю, когда его внедрять.

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

module.exports = {
  plugins: ['~plugins/toast']
}

Файл ~plugins/toast.js:

import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

6. Как изменить переменную среды NODE_ENV

Предыстория: В проекте установите 3NODE_ENVзначение, соответствующее различным версиям. разработка, локальная разработка, выпуск, предварительная версия, производство, онлайн-версия. Среди них предварительная версия имеет больше vconsole, чем производственная версия.

// package.json
"scripts": {
  "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
  "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
  },

Распечататьprocess.env.NODE_ENVеще,production.

В исходном коде рюкзака мы нашли ответ и выполняемbackpack buildкоманда, это будетprocess.env.NODE_ENVпревратиться вproduction, жестко запрограммирован и не настраивается...

В отчаянии, только вprocess.envвниз, добавить__ENVатрибут, представляющийNODE_ENV

clipboard.png

В это время информация напечатана на страницеprocess.env.__ENV undefined, но могу распечататьprocess.env.NODE_ENV.

можно настроитьnuxt.config.jsсередина,envсвойства для решения проблемы.

env: {
  __ENV: process.env.__ENV
}

проблема развития

1. Объект окна или документа не определен?

Предыстория: при внедрении сторонних плагинов или написании непосредственно в кодеwindow, консоль выдаст предупреждение,windowнеопределенный.

При возникновении этой проблемы сервер узла неwindowилиdocumentобъект. обходной путь черезprocess.browserдифференцировать окружающую среду.

if (process.browser) {
  // 引入第三方插件
  require('***')
  // 或者修改window对象下某一属性
  window.mbk = {}
}

наконец

Эта статья в основном посвящена различным проблемам, возникающим в проекте, и если в статье есть какие-либо непонятные или неуместные выражения, вы можете критиковать и исправлять. Мы рекомендуем нашу официальную учетную запись Front-end New Horizons, очень серьезную официальную учетную запись ежедневного журнала, отсканируйте QR-код ниже, чтобы следовать!

clipboard.png

Категории