vue脚手架项目使用cross-env分环境打包

红太狼 2023-06-30 12:52 50阅读 0赞

**一般的实现方式**

//常规的做法
    let mode="dev"; //可以设置：dev、test、prod
    let baseUrl="";
    
    if(mode=="dev"){
      baseUrl=="http://www.xx.com";
    }else if(mode=="test"){
      baseUrl=="http://www.xxtest.com";
    }else {
      baseUrl=="http://www.xxprod.com";
    }
    
    export {
      baseUrl
    }

> 这种做法基本需求是实现了，如果做持续集成，代码在本地跑成功没有bug以后，上传源码到服务器通过执行脚本直接编译打包，这个时候上面的这种常规做法显然就行不通了。

**使用cross-env第三方库实现**

> cross-env官方的介绍是：跨平台环境脚本的设置，你可以通过一个简单的命令（设置环境变量）而不用担心设置或者使用环境变量的平台。

1.  安装依赖`npm install --save-dev cross-env`
2.  添加test.env.js文件![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]
3.  修改prod.env.js文件

module.exports = {
      NODE_ENV: '"production"',
      ENV_CONFIG:'"prod"'
    };

1.  修改build目录下webpack.prod.conf.js文件

const env = config.build[process.env.env_config+'Env'];

1.  修改config目录下index.js文件

build: { 
        //添加下面两行代码
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
        // Template for index.html
        index:
          path.resolve(__dirname, '../dist/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        ...................  
    }

1.  修改build目录下build.js文件

'use strict'
    require('./check-versions')()
    
    // process.env.NODE_ENV = 'production'
    
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    
    // const spinner = ora('building for production...')
    var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' );
    
    
    spinner.start()
    
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 
      if (err) throw err
      webpack(webpackConfig, (err, stats) => { 
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({ 
          colors: true,
          modules: false,
          children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
          chunks: false,
          chunkModules: false
        }) + '\n\n')
    
        if (stats.hasErrors()) { 
          console.log(chalk.red(' Build failed with errors.\n'))
          process.exit(1)
        }
    
        console.log(chalk.cyan(' Build complete.\n'))
        console.log(chalk.yellow(
          ' Tip: built files are meant to be served over an HTTP server.\n' +
          ' Opening index.html over file:// won\'t work.\n'
        ))
      })
    })

1.  修改package.json文件

"scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", 
        "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
      },

1.  在src下面创建common/js 目录下的config.js文件

if (process.env.NODE_ENV == 'development') { 
      baseUrl = "开发环境接口地址http://www.xx.com";
    } else if (process.env.NODE_ENV == 'production') { 
      baseUrl = "正式环境接口地址http://www.xxprod.com";
    } else if (process.env.NODE_ENV == 'testing') { 
      baseUrl = "测试环境接口地址http://www.xxtest.com";
    }

1.  配置全局请求接口 （我在这用的是axios）在main.js中

import baseUrl from './common/js/config'
    axios.defaults.baseURL = baseUrl.baseUrl; //测试接口地址
    Vue.prototype.$axios = axios

用法

this.$axios
          .post("接口地址例如（/test）", 需要传的参数, {  请求头例：（headers: {  token: this.tokenValues }） })
          .then(res => { 
            
          });

ps备注  
　有时候，正式环境的地址是：http://www.xx.com。在弄测试环境的时候为了简化，后端同学就直接用nginx做一个重定向，然后就有了测试环境地址:http://www.xx.com/test/index.html。 在这个时候webpack的配置文件中，就要根据具体情况作出修改，否则部署以后页面就会空白，因为编译后的资源文件找不到了  
**在webpack.base.conf.js文件中，要根据具体情况作出修改。**

let assetPublicPath;
    if (process.env.env_config == 'test') { 
      assetPublicPath='/test/'
    }else if(process.env.env_config == 'prod'){ 
      assetPublicPath=config.build.assetsPublicPath;
    }else{ 
      assetPublicPath=config.dev.assetsPublicPath;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117162449724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ==,size_16,color_FFFFFF,t_70