配置
环境变量
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属性),默认横线
原文地址:http://www.cnblogs.com/Bin-x/p/16853238.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性