首页 > 其他分享 >Nuxt笔记

Nuxt笔记

时间:2022-11-03 09:00:15浏览次数:38  
标签:console log 笔记 ENV host env nuxt Nuxt

配置

环境变量

1. package.json

在package.json文件中,可以通过命令指定环境变量,必须以 NUXT_ENV_ 开头,在服务端与前端均可读到此变量

//package.json
"scripts": {
  "dev:env": "SET NUXT_ENV_COOL_WORD=freezing & nuxt",
}
//nuxt.config.js
console.log(process.env.NUXT_ENV_COOL_WORD)
//vue
export default {
  created () {
    console.log(process.env.NUXT_ENV_COOL_WORD)
  },
  methods: {
    getEnv () {
      console.log(process.env.NUXT_ENV_COOL_WORD)
    }
  }
}

2. nuxt.config.js

通过env指定

//nuxt.config.js
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:1102'
  }
}
//vue
export default {
  created () {
    console.log(process.env.baseUrl)
  },
  methods: {
    getEnv () {
      console.log(process.env.baseUrl)
    }
  }
}

3. .env文件

在根目录下新建.env文件,其中的值会在后端被获取,但并不能在前端获取

#.env
ENV = 'development'
BASE_URL = '/dev-api'
//nuxt.config.js
console.log(process.env.ENV) // development
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:1102'
  },
}
//vue
export default {
  name: 'IndexPage',
  created () {
    console.log(process.env.ENV) // 服务端输出development,前端输出undefined
  },
  methods: {
    getEnv () {
      console.log(process.env.ENV) // undefined
      console.log(process.env.baseUrl) // /dev-api
    }
  }
}

可以通过命令指定不同开发环境下的文件:

#.env.dev
ENV = 'dev'
BASE_URL = '/dev-api'

#.env.prod
ENV = 'prod'
BASE_URL = 'http://localhost:1102'
// package.json
"scripts": {
  "dev": "nuxt --dotenv .env.dev",
  "dev:prod": "nuxt --dotenv .env.prod"
}

4. publicRuntimeConfig

通过指定publicRuntimeConfig,服务端和前端都可获取到值

//nuxt.config.js
export default {
  publicRuntimeConfig: {
    host: 'host'
  }
}
//vue
export default {
  created () {
    console.log(this.$config.host) // host
  },
  methods: {
    getEnv () {
      console.log(this.$config.host) // host
    }
  }
}

5. privateRuntimeConfig

指定privateRuntimeConfig,仅可在服务端获取到值。

当与publicRuntimeConfig冲突时,在服务端会覆盖publicRuntimeConfig的值,在前端会获取到publicRuntimeConfig的值。

//nuxt.config.js
export default {
  privateRuntimeConfig: {
    host: 'host private'
  }
}
//vue
export default {
  created () {
    console.log(this.$config.host) // 服务端返回 host private,前端返回 undefined
  },
  methods: {
    getEnv () {
      console.log(this.$config.host) // undefined
    }
  }
}

端口

在package.json文件中,可以通过命令指定端口号,此时会忽略nuxt.config.js中的端口号配置。

"scripts": {
  "dev:host": "nuxt --port 1103"
}

路由

base

根路径

routeNameSplitter

生成的路由,名称的分隔符(name属性),默认横线

标签:console,log,笔记,ENV,host,env,nuxt,Nuxt
From: https://www.cnblogs.com/Bin-x/p/16853238.html

相关文章

  • JVM学习笔记——内存结构篇
    JVM学习笔记——内存结构篇在本系列内容中我们会对JVM做一个系统的学习,本片将会介绍JVM的内存结构部分我们会分为以下几部分进行介绍:JVM整体介绍程序计数器虚拟机栈......
  • SQL笔记
    --javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown--创建部门表(dept:部门,dname:名称,location:位置)createtabledept(dept......
  • 《SRE实战手册》学习笔记之切入SRE
    转载:https://www.cnblogs.com/imyalost/p/15891000.html这篇文章是《SRE实战手册》学习笔记的第二篇,理解SRE之后,就要找到切入点来落地。 理解SRE中的指标和目标SRE强......
  • Binder学习笔记-2——binder优先级传递
    基于Linux-5.10,有补充Linux-5.15的说明一、优先级相关结构体和成员1.structbinder_prioritystructbinder_priority{//binder_internal.hunsignedintsched_......
  • c primer plus 第一章学习笔记
    1.中央处理单元(cpu)2.随机存取内存(ram)是储存程序和文件的工作区3.使用c语言的7个步骤:1)定义程序的目标:   先自己有思路,思考需要做什么,需要程序做什么,需要哪些信息,......
  • 《SRE实战手册》学习笔记之认识SRE
    转载:https://www.cnblogs.com/imyalost/p/15889223.html前言我自己一直是专注在性能测试和稳定性保障领域的,因此买了很多相关的技术课程学习。极客时间上赵成老师的《SR......
  • 《Unix/Linux系统编程》第十二章学习笔记
    第十二章  块设备I/O和缓冲区管理12.1块设备I/O缓冲区I/O缓冲的基本原理非常简单。文件系统使用一系列I/O缓冲区作为块设备的缓存内存。当进程试图读取(dev,blk)标识......
  • 论文笔记 - RETRIEVE: Coreset Selection for Efficient and Robust Semi-Supervised
    Motivation虽然半监督学习减少了大量数据标注的成本,但是对计算资源的要求依然很高(无论是在训练中还是超参搜索过程中),因此提出想法:由于计算量主要集中在大量未标注的数据上......
  • 学习笔记:KMP
    引入KMP是一种字符串匹配算法,可以在将近线性的时间复杂度内进行字符串匹配。此类问题通常有一个文本串$S$和一个模式串$P$构成,说白了就是在$S$中匹配$T$,S.find(T)......
  • 类的作用域详解(C++ primer7.4笔记)
    7.4类的作用域名字查找的过程:(查找匹配的声明)在名字所在块中寻找语句,查找使用名字之前出现的声明。如果没找到,查找外层作用域还没找到就报错类的定义分为两步处理:......