Nuxt.js 安装与环境配置

nuxt.js文档

npx create-nuxt-app <项目名>

安装nuxt时记得选择dotenv这个用来配置环境

安装 cross-env

cnpm install --save-dev cross-env

在package.json中配置命令

 "scripts": {
    "dev": "cross-env NODE_ENV=development BASE=dev nuxt",
    "build": "cross-env NODE_ENV=production BASE=prod nuxt build",
    "start": "cross-env NODE_ENV=production BASE=prod nuxt start",
    "generate": "cross-env NODE_ENV=production BASE=prod nuxt generate",
    "build:test": "cross-env NODE_ENV=testing BASE=test nuxt build",
    "start:test": "cross-env NODE_ENV=testing BASE=test nuxt start",
    "generate:test": "cross-env NODE_ENV=testing BASE=test nuxt generate"
  }

在根目录新建.env .env.test .env.pord 文件

分别在三个目录新建写下各个环境的配置
env : 开发环境
env.test : 测试环境
env.prod : 生产环境

# **环境

# API路径
BASE_URL =

# 上传路径
BASE_UP_LOAD_URL =

# 域名
BASE_HOST = 

# 端口
BASE_PORT = 

nuxt.config.js配置

require('dotenv').config()
  modules: [
    // Doc: https://github.com/nuxt-community/dotenv-module
    ['@nuxtjs/dotenv', { filename: `.env.${process.env.BASE}` }]
  ],

测试环境配置成功没有

export default {
nuxt.config.js
 server: {
    port: process.env.BASE_PORT,
    host: process.env.BASE_HOST
  }
}

重新跑一次

npm run dev

端口域名配置成功