跳到主要内容

Nuxt.js 相关

环境配置​

配置环境变量​

参考资料：The env property

如果需要添加一些项目中通用的环境变量，比如 CDN 文件的通用基础 URL，按照如下方式进行配置即可：

// nuxt.config.js

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

配置项目基础路径​

参考资料：base - The router property

在默认配置下，Nuxt.js 的基础路由路径是 /，假设其部署在 www.abc.com 域名下，则 URL 就是 www.abc.com/。

如果要设置为子路径，比如 app2，则按照下面的方式配置，就可以用 URL www.abc.com/app2 来访问。

// nuxt.config.js

export default {
  router: {
    base: '/app/'
  }
}

错误排查​

项目 dev 时 build 报错 EPERM: operation not permitted, mkdir '**.nuxt\components'​

解决方案：'EPERM: operation not permitted' error when building Nuxt app。

具体操作：先停止 dev 状态，然后再 build，就不会报错了。

项目初始化后运行报错 TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined​

报错信息为：Nuxt Fatal Error TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.。

Google 之后看到项目官方仓库就有人提了 issue：https://github.com/nuxt/nuxt/issues/10840 ，自己的报错信息正如提问者截图所示，原来是 Nuxt.js 默认关于 tailwindcss 的配置有问题。

解决方法也很简单，按照回帖中很多人所说的方法，去 tailwindcss 官网，按照 Install Tailwind CSS with Nuxt.js 一文所说的方法，对 Nuxt.js 进行重新配置即可。

用 pinia 实现状态管理​

参考项目：https://github.dev/piniajs/example-nuxt-2

状态定义​

// /stores/audio.ts
import { defineStore } from 'pinia'

export const useAudioStore = defineStore({
  id: 'audio',

  state: () => ({
    show: false,
  }),

  actions: {
    showAudioControl () {
      this.$patch({
        show: true,
      })
    },
  },
})

状态使用​

import { storeToRefs } from 'pinia'
import { useAudioStore } from '~/stores/audio'

// 1. 初始化
const audioStore = useAudioStore()

// 2. 使用值
const { doPause } = storeToRefs(audioStore)

// 3. 调用方法
audioStore.showAudioControl()

状态监听​

参考资料：How to Watch Pinia State Inside Vue 3 Components

import { storeToRefs } from 'pinia'
import { useAudioStore } from '~/stores/audio'

const audioStore = useAudioStore()

const { doPause } = storeToRefs(audioStore)

watch(doPause, () => {
  if (doPause.value) {
    // do something
  } else {
    // do something
  }
})