點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

Nuxt.js常見的一些問題（詳細(xì)教程）

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:38:20

Nuxt.js常見的一些問題（詳細(xì)教程）

Nuxt.js常見的一些問題（詳細(xì)教程）:本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，現(xiàn)在分享給大家，也給大家做個(gè)參考。構(gòu)建問題1. 如何在 head 里面引入js文件背景: 在<head>標(biāo)簽中，以inline的形式引入flexible.js文件。本項(xiàng)目主要為移動端項(xiàng)目，引入flexible.js 實(shí)現(xiàn)移動端適配

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Nuxt.js常見的一些問題（詳細(xì)教程）:本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，現(xiàn)在分享給大家，也給大家做個(gè)參考。構(gòu)建問題1. 如何在 head 里面引入js文件背景: 在<head>標(biāo)簽中，以inline的形式引入flexible.js文件。本項(xiàng)目主要為移動端項(xiàng)目，引入flexible.js 實(shí)現(xiàn)移動端適配

本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，現(xiàn)在分享給大家，也給大家做個(gè)參考。

構(gòu)建問題

1. 如何在 head 里面引入js文件?

背景: 在<head>標(biāo)簽中，以inline的形式引入flexible.js文件。本項(xiàng)目主要為移動端項(xiàng)目，引入flexible.js 實(shí)現(xiàn)移動端適配問題。
Nuxt.js 通過 vue-meta 實(shí)現(xiàn)頭部標(biāo)簽管理，通過查看文檔發(fā)現(xiàn)，可以按照如下方式配置：

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

結(jié)果，生成 html:

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

我們發(fā)現(xiàn) vue-meta 把引號做了轉(zhuǎn)義處理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不會再對這些字符做轉(zhuǎn)義了，該字段使用需慎重！

接下來，要把 console.log("hello") 的內(nèi)容替換成 flexible.js，配置升級之后：

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

踩坑成功，下一個(gè)坑...

2. 如何使用預(yù)處理器

背景：在組件中的<template>， <script> 或 <style> 上使用各種預(yù)處理器，加上處理器后，控制臺報(bào)錯(cuò)。

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

這個(gè)問題解決方法非常簡單，只需要安裝這些依賴就好。

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

但是解決過程并不是很順利的，在閱讀中文文檔時(shí)，忽略版本號，按照上面的提示進(jìn)行操作，發(fā)現(xiàn)不能成功，后來各種debug，最后發(fā)現(xiàn)了該解決方案。后知后覺的發(fā)現(xiàn)了中文文檔的版本號過低，如果需要查看文檔，一定要看最新版本的英文文檔！

3. 如何使用px2rem

背景：在css中，寫入px，通過px2rem loader，將px轉(zhuǎn)換成rem

在以前的項(xiàng)目中，是通過 px2rem loader實(shí)現(xiàn)的，但是在Nuxt.js項(xiàng)目下，添加 css loader 還是很費(fèi)力的，因?yàn)樯婕暗絭ue-loader。

想到了一個(gè)其他方案，可以使用 postcss 處理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js文件中添加。

build: {
 postcss: [
 require('postcss-px2rem')({
 remUnit: 75 // 轉(zhuǎn)換基本單位
 })
 ]
},

4. 如何拓展 webpack 配置

背景：給 utils 目錄添加別名

剛剛說到，Nuxt.js內(nèi)置了 webpack 配置，如果想要拓展配置，可以在 nuxt.config.js 文件中添加。同時(shí)也可以在該文件中，將配置信息打印出來。

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

5. 如何添加 vue plugin

背景：自己封裝了一個(gè) toast vue plugin，由于 vue 實(shí)例化的過程沒有暴露出來，不知道在哪個(gè)時(shí)機(jī)注入進(jìn)去。

可以在 nuxt.config.js 中添加 plugins 配置，這樣插件就會在 Nuxt.js 應(yīng)用初始化之前被加載導(dǎo)入。

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.如何修改環(huán)境變量 NODE_ENV

背景：在項(xiàng)目中，設(shè)置 3個(gè) NODE_ENV 的值，來對應(yīng)不同的版本。development，本地開發(fā)；release，預(yù)發(fā)布版本；production，線上版本。其中，預(yù)發(fā)布版本比production版本，多出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 的源碼中，找到了答案，在執(zhí)行 backpack build 命令時(shí)，會把 process.env.NODE_ENV 修改為 production，并且是寫死的不可配置的......

無奈下，只能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV

這時(shí)，在頁面中打印出來的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。

可以通過配置 nuxt.config.js 中的，env屬性，解決該問題。

env: {
 __ENV: process.env.__ENV
}

開發(fā)問題

1. Window 或 Document 對象未定義？

背景: 在引入第三方插件，或者直接在代碼中寫 window 時(shí)，控制臺會給出警告，window 未定義。
發(fā)生在這個(gè)問題的原因時(shí)，node服務(wù)端并沒有window 或 document 對象。解決方法，通過 process.browser 來區(qū)分環(huán)境。

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

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

使用AnglarJs實(shí)現(xiàn)上拉加載

使用vue.js如何實(shí)現(xiàn)被選中的改變方法

在vue中如何阻止click事件冒泡

Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容

vue中如何改變當(dāng)前項(xiàng)的顯示隱藏

Ionic實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)

在vue中如何實(shí)現(xiàn)父組件點(diǎn)擊觸發(fā)子組件事件

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Nuxt.js常見的一些問題（詳細(xì)教程）

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：步驟教程 js

熱門焦點(diǎn)

Nuxt.js常見的一些問題（詳細(xì)教程）

Nuxt.js常見的一些問題（詳細(xì)教程）

Nuxt.js常見的一些問題（詳細(xì)教程）

最新推薦

猜你喜歡

熱門推薦