iview搭建项目中引入define.js后编译，根据不同分支引入不同的define.js文件

最新推荐文章于 2022-11-18 17:36:54 发布

weixin_34212762

最新推荐文章于 2022-11-18 17:36:54 发布

阅读量240

点赞数

文章标签： javascript webpack python ViewUI

原文链接：https://my.oschina.net/yj1993/blog/3060058

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一种：cross-env

1、安装cross-env

https://github.com/kentcdodds/cross-env#readme

npm install --save-dev cross-env

2、注释不需要的文件

config.js

env.js

webpack.dev.config.js

// fs.open('./build/env.js', 'w', function(err, fd) {
//     const buf = 'export default "development";';
//     fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
// });

webpack.prod.config.js

// fs.open('./build/env.js', 'w', function(err, fd) {
//     const buf = 'export default "production";';
//     fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
// });

在webpack.prod.config.js引入define.js文件，并添加打印，方便看

const config = require('./config');
console.log('\n-------------- build.env ----------------');
console.log(config);
console.log('-------------- build.env ----------------\n');

因为项目的publicPath是写死的/dist/

3、修改define.js

let envs = {
    development: {
        ajaxUrl: {
            url1: 'http://172.18.11.23:7777/api/',
            url2: 'http://172.18.11.23:8079'
        }
    },
    test: {
        ajaxUrl: {
            url1: 'http://172.18.11.23:7777/api/',
            url2: 'http://172.18.11.23:8079'
        }
    },
    production: {
        ajaxUrl: {
            url1: 'https://oa.danke.com/api/',
            url2: 'https://oa.danke.com'
        }
    }
};

let config = {
    env: process.env.NODE_ENV,
    ajaxUrl: envs[process.env.NODE_ENV].ajaxUrl
}
module.exports = config;

4、url引用

在页面中引用

import config from '../../build/config';
 getInfo () {
            ajax.ajax.get(config.ajaxUrl.url1 + 'getInfo');
        }

PS：这种方式适合刚开搭建项目的时候用，如果项目后期再用这个的话页面引用改动太多；

第二种：webpack+gulp

1、在oa-view下面添加gulpfile.js

/**
 * @Author: yangjiao
 * @Date: 2019/6/8
 */

const gulp = require('gulp');
const rename = require("gulp-rename");

const webpack = require('webpack');

const prodConfig = require('./build/webpack.prod.config');

gulp.task('copy-dev', function (cb) {
    gulp.src('./src/views/define-dev.js')
        .pipe(rename('define.js'))
        .pipe(gulp.dest('./src/views'));
    cb();
});

gulp.task('copy-test', function (cb) {
    gulp.src('./src/views/define-test.js')
        .pipe(rename('define.js'))
        .pipe(gulp.dest('./src/views'));
    cb();
});

gulp.task('copy-prod', function (cb) {
    gulp.src('./src/views/define-prod.js')
        .pipe(rename('define.js'))
        .pipe(gulp.dest('./src/views'));
    cb();
});

gulp.task('webpack', function () {
    return new Promise((resolve, reject) => {
        webpack(prodConfig, function (err, stats) {
            resolve()
        })
    })
});
//
// gulp.task('ping', function (cb) {
//     console.log('pong');
//     cb();
// });
//
// gulp.task('default', gulp.series('copy', 'webpack', function (cb) {
//     console.log('msg');
//     cb();
// }));


gulp.task('build-dev', gulp.series('copy-dev', 'webpack', function (cb) {
    console.log('msg');
    cb();
}));
gulp.task('build-test', gulp.series('copy-test', 'webpack', function (cb) {
    console.log('msg');
    cb();
}));

gulp.task('build-prod', gulp.series('copy-prod', 'webpack', function (cb) {
    console.log('msg');
    cb();
}));

2、复制3份define.js文件，分别为

define-dev.js

define-test.js

define-prod.js

3、修改package.json文件

4、编译命令

(1)直接用以下命令可以编译

gulp build-prod

(2)如果2中修改了之后可以直接用下面命令编译

npm run build-prod

PS：这种方式太繁琐，以后编译主用gulp,和我的初衷不一样，而且一般不建议webpack和gulp并用。

第三种：shell脚本替换文件(推荐)

1、在oa-view下面添加脚本文件build.sh

#!/usr/bin/env bash

case $1 in

    dev)
        echo -e 'build dev\n'
        cp ./src/views/define-dev.js ./src/views/define.js && npm run build
        ;;
    test)
        echo -e 'build test\n'
        cp ./src/views/define-test.js ./src/views/define.js && npm run build
        ;;
    prod)
        echo -e 'build prod\n'
        if [ ! -f ./src/views/define-prod.js ]; then
            echo -e 'no define-prod.js file error\n'
            exit 0
        fi
        cp ./src/views/define-prod.js ./src/views/define.js && npm run build
        ;;
    *)
        echo 'build dev|test|prod'
esac