大致需求
需要实现一套代码运行与打包多个平台,还能通过dist文件夹内部的config.js文件进行打包配置修改系统与对应后端接口。
配置说明(以两个系统平台为准)
- 两个development环境配置
- 一个production环境配置
- package.json文件配置
- router路由配置
- request请求配置
- config.js系统配置
development开发环境配置
1.在src文件路劲下直接创建两个自定义开发环境配置
2.内部需要配置一个系统标题与系统对应的后端接口
production生产环境配置
-
创建一个.env.prod文件
-
内容可以不放东西,只是作为一个打包渠道文件,你也可以就使用默认的env.production文件,对应默认的build。但是还是建议将自己的环境区分出来,方便后续内容更改。
打包与预览文件创建
1.如果你的项目里面没有build文件夹,就创建一个build文件夹下面创建一个index.js文件用来配置preview
2.配置内容 针对预览env.prod文件,以你自己的生产文件为准
const { execSync } = require(‘child_process’);
const args = require(‘minimist’)(process.argv.slice(2));
const isPreview = args.preview;
if (isPreview) {
execSync(vue-cli-service serve --mode prod
, { stdio: ‘inherit’ });
}
package.json文件配置,放在scripts下
“build:prod”: “vue-cli-service build --mode prod”,
“dev-demo1”: “vue-cli-service serve --mode dev-demo1”,
“dev-demo2”: “vue-cli-service serve --mode dev-demo2”,
“preview”: “node build/index.js --preview”,
router配置思路
编写两个fucntion 分别控制路由的隐藏与默认路由的配置
> const isHidden = (envName)=>{
if(process.env.NODE_ENV=== "production'){
/* 生产环境 */
return envName === config.ENV ? false : true;
}else{
/* 开发环境 */
return envName === process.env.VUE_APP_TITLE?false:true;
}
};
const homeRoute = ()=>{
let envName = '';
if(process.env.NODE_ENV=== "production'){
envName = config.ENV;
}else{
envName = process.env.VUE_APP_TITLE;
}
if(envName === 'demo1'){
return {
path:'/',
redirect: "/",
component:Layout,
children:[{
path:'',
name:'Demo1',
component:()=>import("@/views/demo1/index"),
meta:{
title:"DEMO1",
iconClass: [],
key: "/Demo1",
}
}],
hidden:isHidden('demo1')
};
}
再将homerute方法在配置的路由中调用就行了。
config.js文件配置
1.再public文件夹下创建一个config.js文件,并在下方写入对应的系统名称与后端接口路径
window.globalConfig = {
ENV: 'demo1', // 默认环境,可以在部署时修改
API_BASE_URL: {
demo1:'xxx:xxx:xxx:xxxx',
demo2:'xxx:xxx:xxx:xxxx'
},
};
2.在index.html文件中引入config.js文件
<script src="<%= BASE_URL %>config.js"></script>
3.在src文件夹下创建一个config.js文件,其中defaultConfig配置表示如果全局配置失效的情况下的配置
const defaultConfig = {
ENV: 'becon',
API_BASE_URL: {
demo1:'xxx:xxx:xxx:xxxx',
demo2:'xxx:xxx:xxx:xxxx'
}
};
const globalConfig = window.globalConfig || {};
export default {
ENV: globalConfig.ENV || defaultConfig.ENV,
API_BASE_URL: globalConfig.API_BASE_URL ? globalConfig.API_BASE_URL[globalConfig.ENV] : defaultConfig.API_BASE_URL[defaultConfig.ENV],
// 其他配置...
};
request请求配置,在你的request请求的js文件中引入src下的config.js文件
大概就是生产环境就通过conifg配置系统和接口,开发环境就通过对应的.env配置文件来控制系统和后端接口
import config from '@/config'; // 导入配置文件
if(process.env.NODE_ENV=== "production'){
baseURL = config.API_BASE_URL;
} else {
baseURL = process.env.VUE_APP_BASE_API;
}