Nuxt.js踩坑總結(jié)分享
構(gòu)建問題
1. 如何在 head 里面引入js文件?
背景: 在<head>標(biāo)簽中，以inline的形式引入flexible.js文件。本項目主要為移動端項目，引入flexible.js 實現(xiàn)移動端適配問題。
Nuxt.js 通過 vue-meta 實現(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']
}
踩坑成功，下一個坑...
2. 如何使用預(yù)處理器
背景：在組件中的<template>， <script> 或 <style> 上使用各種預(yù)處理器，加上處理器后，控制臺報錯。
<style lang="sass"> .red color: red </style>
這個問題解決方法非常簡單，只需要安裝這些依賴就好。
npm install --save-dev node-sass sass-loader
但是解決過程并不是很順利的，在閱讀中文文檔時，忽略版本號，按照上面的提示進(jìn)行操作，發(fā)現(xiàn)不能成功，后來各種debug，最后發(fā)現(xiàn)了該解決方案。后知后覺的發(fā)現(xiàn)了中文文檔的版本號過低，如果需要查看文檔，一定要看最新版本的英文文檔！
3. 如何使用px2rem
背景：在css中，寫入px，通過px2rem loader，將px轉(zhuǎn)換成rem
在以前的項目中，是通過 px2rem loader實現(xiàn)的，但是在Nuxt.js項目下，添加 css loader 還是很費力的，因為涉及到vue-loader。
想到了一個其他方案，可以使用 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 文件中添加。同時也可以在該文件中，將配置信息打印出來。
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
背景：自己封裝了一個 toast vue plugin，由于 vue 實例化的過程沒有暴露出來，不知道在哪個時機注入進(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
背景：在項目中，設(shè)置 3個 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 命令時，會把 process.env.NODE_ENV 修改為 production，并且是寫死的不可配置的......
無奈下，只能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV
這時，在頁面中打印出來的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。
可以通過配置 nuxt.config.js 中的，env屬性，解決該問題。
env: {
__ENV: process.env.__ENV
}
開發(fā)問題
1. Window 或 Document 對象未定義？
背景: 在引入第三方插件，或者直接在代碼中寫 window 時，控制臺會給出警告，window 未定義。
發(fā)生在這個問題的原因時，node服務(wù)端并沒有window 或 document 對象。解決方法，通過 process.browser 來區(qū)分環(huán)境。
if (process.browser) {
// 引入第三方插件
require('***')
// 或者修改window對象下某一屬性
window.mbk = {}
}
最后
本文主要在項目中遇到的各種問題，文中有任何表述不清或不當(dāng)?shù)牡胤?，歡迎大家批評指正。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+node實現(xiàn)圖片上傳及預(yù)覽的示例方法
這篇文章主要介紹了vue+node實現(xiàn)圖片上傳及預(yù)覽的示例方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文主要介紹了Vue3+Vite使用雙token實現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了webpack項目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue父子組件的通信的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例
這篇文章主要為大家介紹了Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
記錄--使用el-time-picker默認(rèn)值遇到的問題
這篇文章主要介紹了記錄--使用el-time-picker默認(rèn)值遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue中view-model雙向綁定基礎(chǔ)原理，文中給大家介紹了vue雙向綁定的原理總結(jié)，本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10