一，利用process新建环境变量
对应的代码文件：
.env
# 公共环境配置# VUE_APP_VERSION默认值,都会执行的文件VUE_APP_VERSION = "---"
.env.development
# 开发环境配置ENV = 'development'NODE_ENV = 'development'VUE_APP_VERSION = "---"VUE_APP_baseUrl = 'http://localhost:3000/dcxt/shop/'
.env.testing
# 测试环境配置ENV = 'testing'NODE_ENV = 'testing'VUE_APP_baseUrl = '测试环境的接口地址'
.env.pre
# 预发布环境配置ENV = 'pre'NODE_ENV = 'pre'VUE_APP_baseUrl = '预发布环境的接口地址:5001'
.env.production
# 生产环境配置ENV = 'production'NODE_ENV = 'production'VUE_APP_baseUrl = '生产环境的接口地址'
二，封装axios的时候，需要使用这个base_Url
为了打包运行后看当前页面的访问路径，我在main.js中又写了这句：
console.log("当前请求的基本地址", process.env.VUE_APP_baseUrl);
三，当开发时，npm run serve
这时候，肯定执行的是.env.development，所以控制台打印的是：
到这里过，开发过程中是用不上build.js的，只有需要打包部署的时候才会用得上。
四，创建build.js文件
需要先安装两个npm包：
npm i cross-env
npm i shelljs
然后build.js的具体代码:
const shell = require("shelljs"); //执行打包代码const inquirer = require("inquirer"); //问询者const chalk = require("chalk"); //更改字体颜色const pkg = require("../package.json"); //获取版本信息const fs = require("fs"); //文件操作模块const platform = new Map([["测试demo通用版", "HDD"]]);const env = new Map([["测试环境", "testing"],["准生产环境", "pre"],["生产环境", "production"]]);const build = async () => {const version = pkg.version;const res = await inquirer.prompt([{type: "list",name: "platform",message: "请选择你要部署的版本？",choices: ["测试demo通用版"]},{type: "list",name: "env",message: "请选择你要部署的环境？",choices: ["生产环境", "准生产环境", "测试环境"]}]);//这个转化出来时，键值对的键是platform，值是选择的内容console.log(chalk.green(`您要打包的是 ******* ${res.platform}(${version})【${res.env}】*******`));//二次确认const res2 = await inquirer.prompt([{type: "confirm",name: "secondCheck",message: "确定以上信息无误?",default: true}]);if (!res2.secondCheck) {return;}const envName = env.get(res.env);const platName = platform.get(res.platform);console.log(`cross-env VUE_APP_PlATFORM=${platName} BABEL_ENV=${envName}VUE_APP_VERSION=${version} ./node_modules/.bin/vue-cli-servicebuild --mode=${envName}`);// exec括号内不能换行，不然环境变量会读取不到,在这里又在process中新建了这些变量await shell.exec(`cross-env BABEL_ENV=${envName} VUE_APP_VERSION=${version} VUE_APP_PlATFORM=${platName} ./node_modules/.bin/vue-cli-service build --mode=${envName}`);const projectName = pkg.name;const outerDir = `dist/${projectName}_${platName}_${envName}`;console.log(chalk.green(`编译完成，请发布${outerDir}文件夹!`));};build();
五，对应的vue.oconfig.js中的配置
const pkg = require("./package.json");
和
publicPath: "", //项目部署的地址(前面是www.服务器.com)拼接这里的地址，也就是说静态资源从这里找outputDir: process.env.NODE_ENV==="production"?`dist/${pkg.name}_${process.env.VUE_APP_PlATFORM}_${process.env.NODE_ENV}`:`dist/${pkg.name}_${process.env.VUE_APP_PlATFORM}`, //build打包之后的文件夹名称assetsDir: "./", //打包之后的静态资源的相对于outputDir的位置
六，在package.json中的配置
"build": "node script/build.js",
这样，一但npm run build，就会执行build.js文件。
从而达到这样的效果：
