vue 项目基础配置 配置多变量环境

   1.   在 package.json里的scripts配置serve test build(启动脚本,改为三种启动方式来执行不同的环境)

• 通过 npm run serve 启动本地 , 执行 development
• 通过 npm run test 打包测试 , 执行 testing
• 通过 npm run build 打包正式 , 执行 production

例:

"scripts": {
  "serve": "vue-cli-service serve --open", //开发环境
  "test": "vue-cli-service build --mode testing",//测试环境
  "build": "vue-cli-service build",//打包环境
}

        2.在项目的根目录下创建三个文件  用来存储环境变量(注:不可乱取名字)

        三个文件分别是  .env.development   .env.production  .env.testing 

      文件里写  例: 

.env.development  开发环境配置

NODE_ENV='development'

NODE_ENV='production'

.env.testing  打包测试环境配置

NODE_ENV='testing'

3.在src目录下新建一个config 文件夹 里面在建4个js文件

        env.development.js     env.production.js       env.testing.js   写:

module.export={
    basuUrl:""
}

         在 src/config/index.js 里写         

const environment= process.env.VUE_APP_ENV
const config=require("./env."+environment)
module.exports=config

4.在main.js中引入

import {baseUrl} from '@/config/index.js'

5.就可以根据不同的命令来执行不同的命令环境