Vue CLI多项目运行和打包

一、新增运行指令和环境文件
1、参考vue官网修改package.json,例如
    "serve-ops": "vue-cli-service serve --mode ops-dev",
    "serve-cloud": "vue-cli-service serve --mode cloud-dev",
    "build-ops": "vue-cli-service build --mode ops-prod --dest dist-ops",
    "build-cloud": "vue-cli-service build --mode cloud-prod --dest dist-cloud",
2、项目根目录新建环境文件
    文件名.env.ops-dev,.env.ops-prod,.env.cloud-dev,.env.cloud-prod
    配置根据需求修改,例如
    NODE_ENV = 'development'
    VUE_APP_VIEWS = 'views-ops'
    VUE_APP_TITLE = '后台管理系统'
    VUE_APP_BASE_URL = 'http://192.168.3.5:9091'

二、其他目录修改views,router,axios等
1、src目录新建项目子目录view-ops,views-cloud,由views拷贝过来
2、router目录新建modules子目录,新建ops.js和cloud.js
3、在index.js按条件引入不同项目路由,例如
    import ops from './modules/ops'
    import cloud from './modules/cloud'
    const routes = process.env.VUE_APP_VIEWS=='views-ops'?ops:cloud
    const router = new VueRouter({
        mode: 'hash',
        base: process.env.BASE_URL,
        routes
    })
4、修改axios
    let config = {
        baseURL: window.baseUrl ||  process.env.VUE_APP_BASE_URL || "/api",
        timeout: 10 * 1000, // Timeout
        // withCredentials: true, // Check cross-site Access-Control
    };

 

posted @ 2021-08-04 14:40  鱿鱼须须  阅读(427)  评论(0编辑  收藏  举报