开场白
开始使用
API
- API: The <client-only> Component
- API: <nuxt-child> 组件
- API: <nuxt-link> 组件
- API: <nuxt> 组件
- API: 构建配置
- API: buildDir 属性
- API: 缓存配置
- API: CSS 配置
- API: dev 属性配置
- API: dir 属性
- API: 环境变量配置
- API: generate 属性配置
- API: globalName 属性
- API: head 属性配置
- API: The hooks Property
- API: ignore 属性
- API: The loading indicator Property
- API: loading 属性配置
- API: The mode Property
- API: modern 属性
- API: modules 属性
- API: modulesDir 属性
- API: performance 属性
- API: plugins 属性配置
- API: The render Property
- API: rootDir 属性配置
- API: router 属性配置
- API: server 属性
- API: serverMiddleware 属性
- API: srcDir 属性配置
- API: transition 属性配置
- API: vue.config 属性
- API: watch 属性
- API: watchers 属性
- API: 上下文对象
- API: asyncData 方法
- API: The Builder Class
- API: The Generator Class
- API: The ModuleContainer Class
- API: The Nuxt Class
- API: The Renderer Class
- API: Nuxt Modules Intro
- API: nuxt.renderAndGetWindow(url, options)
- API: nuxt.renderRoute(route, context)
- API: nuxt.render(req, res)
- API: Nuxt(options)
- API: fetch 方法
- API: head 方法
- API: key 属性
- API: layout 属性
- API: loading 属性
- API: middleware 属性
- API: scrollToTop 属性
- API: transition 属性
- API: validate 方法
- API: The watchQuery Property
配置
- 外部资源
- 预处理器
- JSX
- Postcss 插件
- 如何扩展 Webpack 的配置
- Webpack 插件
- Caching Components
- 如何更改应用的主机和端口配置?
- 如何集成 Google 统计分析服务?
- 如何发起跨域资源请求?
- How to extend Webpack to load audio files?
部署
- 如何使用 Now.sh 进行部署?
- 使用 Surge.sh 部署
- 在 Google App Engine 上部署
- Netlify 部署
- AWS: S3+Cloudfront 部署
- Dokku 部署
- nginx 代理
- 如何部署至 GitHub Pages?
- 部署至 Heroku
其他
API: 环境变量配置
- 类型:
Object
Nuxt.js 让你可以配置在客户端和服务端共享的环境变量。
例如 (nuxt.config.js
):
module.exports = {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}
以上配置我们创建了一个 baseUrl
环境变量,如果应用设定了 BASE_URL
环境变量,那么 baseUrl
的值等于 BASE_URL
的值,否则其值为 http://localhost:3000
。
然后, 我们可以通过以下两种方式来使用 baseUrl
变量:
- 通过
process.env.baseUrl
- 通过
context.baseUrl
,请参考 context api
你可以使用 env
属性配置第三方服务的公钥信息。
举个例子, 我们可以利用它来配置 axios 的自定义实例。
plugins/axios.js
:
import axios from 'axios'
export default axios.create({
baseURL: process.env.baseUrl
})
然后在页面中,我们可以使用 import axios from '~/plugins/axios'
引入 axios
模块。
自动注入环境变量
如果在构建阶段定义以NUXT_ENV_
开头的环境变量,例如:NUXT_ENV_COOL_WORD=freezing nuxt build
,它们将自动注入环境变量中。请注意,它们可能优先于nuxt.config.js
中具有相同名称的已定义变量。
process.env == {}
请注意,Nuxt使用webpack的definePlugin来定义环境变量。这意味着Node.js中的process
或process.env
既不可用也不能定义。nuxt.config.js中定义的每个env属性都单独映射到process.env.xxxx
并在编译期间进行转换编译。
意思是,console.log(process.env)
将输出{}
,但console.log(process.env.you_var)
仍将输出您的值。它将process.env.your_var
的所有实例替换为您将其设置为的值。即:env.test ='testing123'
。如果你在代码中的某个地方使用process.env.test
,它实际上被翻译成'testing123'。
编译前:
if (process.env.test == 'testing123')
编译后:
if ('testing123' == 'testing123')
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论