Nuxt.js踩坑分享

時間 2019-11-17

原文原文鏈接

構建問題

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

背景: 在<head>標籤中，以inline的形式引入flexible.js文件。本項目主要爲移動端項目，引入flexible.js 實現移動端適配問題。javascript

Nuxt.js 經過 vue-meta 實現頭部標籤管理，經過查看文檔發現，能夠按照以下方式配置：css

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

結果，生成 html: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，配置升級以後：vue

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

踩坑成功，下一個坑...java

2. 如何使用預處理器

背景：在組件中的<template>， <script> 或 <style> 上使用各類預處理器，加上處理器後，控制檯報錯。node

<style lang="sass">
.red
  color: red
</style>
複製代碼

這個問題解決方法很是簡單，只須要安裝這些依賴就好。webpack

npm install --save-dev node-sass sass-loader
複製代碼

可是解決過程並非很順利的，在閱讀中文文檔時，忽略版本號，按照上面的提示進行操做，發現不能成功，後來各類debug，最後發現了該解決方案。後知後覺的發現了中文文檔的版本號太低，若是須要查看文檔，必定要看最新版本的英文文檔！web

3. 如何使用px2rem

背景：在css中，寫入px，經過px2rem loader，將px轉換成remnpm

在之前的項目中，是經過 px2rem loader實現的，可是在Nuxt.js項目下，添加 css loader 仍是很費力的，由於涉及到vue-loader。

想到了一個其餘方案，可使用 postcss 處理。能夠在 nuxt.config.js 文件中添加配置，也能夠在postcss.conf.js文件中添加。

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 75 // 轉換基本單位
    })
  ]
},
複製代碼

4. 如何拓展 webpack 配置

背景：給 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 plugin

背景：本身封裝了一個 toast vue plugin，因爲 vue 實例化的過程沒有暴露出來，不知道在哪一個時機注入進去。

能夠在 nuxt.config.js 中添加 plugins 配置，這樣插件就會在 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

背景：在項目中，設置 3個 NODE_ENV 的值，來對應不一樣的版本。development，本地開發；release，預發佈版本；production，線上版本。其中，預發佈版本比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 的源碼中，找到了答案，在執行 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
}
複製代碼

開發問題

1. Window 或 Document 對象未定義？

背景: 在引入第三方插件，或者直接在代碼中寫 window 時，控制檯會給出警告，window 未定義。

發生在這個問題的緣由時，node服務端並無window 或 document 對象。解決方法，經過 process.browser 來區分環境。

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

最後

本文主要在項目中遇到的各類問題，文中有任何表述不清或不當的地方，歡迎你們批評指正。給你們推薦咱們的公衆號前端新視野，一個很認真的日刊公衆號，歡迎掃描下方二維碼關注！

1. Nuxt.js踩坑分享
2. nuxt.js踩坑記錄
3. nuxt.js實戰踩坑記錄
4. ios友盟分享踩坑
5. Nuxt.js項目搭建配置踩坑
6. [分享][Vue踩坑記]scoped CSS
7. oAuth2 升級Spring Cloud Finchley.RELEASE踩坑分享
8. Nginx location 配置踩坑過程分享
9. nuxt 踩坑分享之 pages 命名
10. Arrays.asList()踩坑踩坑
更多相關文章...
• SVN分支 - SVN 教程
• IP地址分配（靜態分配+動態分配+零配置） - TCP/IP教程
• Git五分鐘教程
• 算法總結-二分查找法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。