vue环境配置实践

vue-cli 安装

npm install -g @vue/cli

不同环境需要不同配置时候

比如 development环境需要 请求地址为： 127.0.0.1:3000/api/getuser

        production环境需要 请求地址为： https:www.niubi123.com/api/getuser

脚手架默认配置是

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",

其中 如果直接运行  比如 serve ，开发模式   webpack会自动为开发模式优化打包，但是此时的process.env.NODE_ENV 是undefined（main.js) 

如果想要设置 可以这样做

1.添加命令 并且在最后设置 --model xxx   比如：

"test": "vue-cli-service serve --mode test"

2.在package.json 同级目录 添加 .env.test 文件 （.env.xxx)根据 你传入的mode

3.在这个文件中，可以做如下配置

NODE_ENV = "test"
VUE_APP_ENV = "test"
VUE_APP_NAME = "ZZZ"

然后通过 process.env.XXX 读取

我的使用方法是 创建一些列配置文件 在里面写入需要的配置

 然后在index.js 里面动态引入 导出

const env = process.env.VUE_APP_ENV
const obj = require(`./${env}.config.js`)
module.exports = obj

之后便可以像普通文件一样引入配置(根据你的不同命令获得不同配置）

import xx from './config/index.js'

console.log(xx.name)