项目内的多环境打包。以及多个项目配置打包

一、单个项目多环境配置

1.在根目录创建一下文件

.env 						全局默认配置文件，不论什么环境都会加载合并
.env.development			开发环境配置文件
	 development 	模式用于 vue-cli-service serve
.env.production				生产环境配置文件
	 production 模式用于以下两个script命令  
	 	vue-cli-service build 
	 	vue-cli-service test:e2e
.env.test					测试环境配置文件
	 test 模式用于以下两个script命令 
  		vue-cli-service test:unit 
  		vue-cli-service build --mode test

2.以上配置文件内容为项目某些变量

打包配置

VUE_APP_HOST="/api"			用于所有请求数据的地址前缀（代理后台地址）配置
VUE_APP_HISTORY_MODE="/"	用于启动项目后访问的重定向根目录，如：
	启动的地址 + /  -----  http://localhost:8080 /
	前提在 vue.config.js 配置了 publicPath: process.env.VUE_APP_HISTORY_MODE,
注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX,详细地址：
https://cli.vuejs.org/zh/guide/mode-and-env.html

代理配置

proxy: {
      '/api': { //这里最好有一个 
          target: 'http://pcb.wttx56.cn:9091/WebAPI/DoWork', // 后台接口域名
          ws: false, //如果要代理 websockets，配置这个参数
          secure: false, // 如果是https接口，需要配置这个参数
          changeOrigin: true, //是否跨域
          pathRewrite: {
              '^/api': ''
          }
      },
}

打包文件所向

outputDir = production
	打包后会在根目录想创建 production 目录存储打包文件，
	前提在 vue.config.js 配置了 outputDir: process.env.outputDir

3.在 package.json 文件内 配置命令

"serve": "vue-cli-service serve",			用于 development 的配置
"build": "vue-cli-service build",			用于 production 的配置
"test": "vue-cli-service build --mode test" 用于 test 的配置

二、多个项目配置

创建子项目配置

在 vue.config.js 内创建项目配置项

const config = {
	[项目名]: {
		pages: {
			index: {
				entry: "src/main.js",				//页面入口
				template: "public/index.html",		//模板来源
				filename: "index.html"				//在 dist/index.html 的输出
			}
		},
		publicPath: "./",
		devServer: {
			port: 8080, // 端口地址
			open: true, // 是否自动打开浏览器页面
			//host: "0.0.0.0", // 指定使用一个 host，默认是 localhost
			//https: false, // 使用https提供服务
			//disableHostCheck: true,
			// 设置代理
			proxy:{
				'/api': { 
					 target: 'https://wx.lqfast.com/NewAPI/DoWork',
					 changeOrigin: true,
					 ws: true,
					 pathRewrite: {
					   '^/api': ''
					 }
				}
			}
		}
	},
	... ... ...更多项目配置
}

把上面配置项映射出来

let projectName = process.env.PROJECT_NAME; //获取命令执行后的项目名
module.exports = {
	...config[projectName],	//导出配置
	
	// 输出文件目录
	outputDir: projectName ? "dist/" + projectName + "/" : 'dist/'
	
};

在 package.json 配置项目 script 命令

"dev:[项目名]": "cross-env PROJECT_NAME=[项目名] vue-cli-service serve",

如有不足之处，请留言相互学习，谢谢。