nuxtjs区分生产环境和开发环境的配置

nuxt.js区分生产环境和开发环境的配置,通过 process.env.xxx直接访问

  1. 下载 cross-env
npm install --save-dev cross-env
//或者 yarn add cross-env -D
  1. 在根目录下面新建文件夹 env.js
// env.js
module.exports = {
    
    
 development: {
    
    
   NODE_ENV: 'development',
   VUE_APP_BASE_API: '/dev',
 },
 production: {
    
    
   NODE_ENV: 'production',
   VUE_APP_BASE_API: '/pro',
 },
}
  1. 在nuxt.config.js中添加如下代码
// nuxt.config.js
import env from './env'
export default {
    
    
	... ...
	
	env:{
    
    
	  NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
	  VUE_APP_BASE_API: env[process.env.NODE_ENV].VUE_APP_BASE_API,
	},
	
	... ...
}
  1. 在package.json中修改启动配置为:
// package.json
{
    
    
	"scripts": {
    
    
	    "dev": "cross-env NODE_ENV=development nuxt",
	    "build": "cross-env NODE_ENV=production nuxt build",
	    ... ... // 哪里需要配置,就添加 cross-env NODE_ENV=??即可
  	},
}
  1. 在项目中使用
// 开发环境
console.log(process.env.VUE_APP_BASE_API) // /dev   

// 生产环境
console.log(process.env.VUE_APP_BASE_API) // /pro   

猜你喜欢

转载自blog.csdn.net/qq_41329287/article/details/129424761