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

叁歲伎倆 2022-01-15 22:45 344阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## 第一种：cross-env ##

### 1、安装cross-env ###

[https://github.com/kentcdodds/cross-env\#readme][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文件 ###

![38d24f2c770c1f9a0d3632eafb6161be55a.jpg][]

### 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

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

define-dev.js

define-test.js

define-prod.js

### 3、cd 到oa-view下面 ###

直接用下面命令替换文件并编译

./build.sh prod

PS：推荐用这种，改动小，功能照样实现。

## 查看编译后的文件是否正确 ##

第一，看define.js是否已经修改

第二，编译成功之后cd搭配dist文件夹下面

用下面命令启动编译之后的项目，看引用是否正确。

php -S 0.0.0.0:8080

转载于:https://my.oschina.net/yj1993/blog/3060058

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061647
[hot3.png]: /images/20220115/7f0aca01dee948fa9055ffada0372e03.png
[https_github.com_kentcdodds_cross-env_readme]: https://github.com/kentcdodds/cross-env#readme
[38d24f2c770c1f9a0d3632eafb6161be55a.jpg]: /images/20220115/1c58927fb0c8463b909e10cf639038e6.png