create-nuxt-app(nuxt.js) 脚手架发布环境配置

原文链接create-nuxt-app(nuxt.js) 脚手架发布环境配置

Nuxt.js 是什么?

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

该项目的目标是创建一个灵活的应用框架,让开发者可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。create-nuxt-app(nuxt.js) 脚手架发布环境配置
create-nuxt-app 是什么?

这是为了让开发者快速入门,nuxt.js团队开发的一款脚手架。

更具体的介绍请移步官网。

开始说说今天要解决的问题:为不同的发布环境打包。例如生产环境、测试环境等等。
首先在项目的根目录创建不同环境的配置文件,文件名可自定义,为了好区分我建的两个文件如下:

nuxt.test.config.js

const commonConfig = require('./nuxt.config')

commonConfig.env.BASE_URL = 'http://test.linbenjian.work'

module.exports = commonConfig

nuxt.prod.config.js

const commonConfig = require('./nuxt.config')

commonConfig.env.BASE_URL = 'http://www.linbenjian.work'

module.exports = commonConfig

package.json修改如下:

  "build-test": "nuxt build -c nuxt.test.config.js",
  "build-prod": "nuxt build -c nuxt.prod.config.js",

然后在项目的文件里就可以使用相应的配置:

import axios from 'axios'
let baseurl = process.env.BASE_URL || 'http://127.0.0.1:8001'

create-nuxt-app这脚手架build和start的操作是分开的,start默认端口3000

如果要在指定的端口启动,可以这样设置:

    "start-test": "nuxt start -p 8001",
    "start-prod": "nuxt start -p 8002",

结束!