VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:

    文件结构如下图:

    1)在config文件内新建test.env.js文件:

    'use strict'
    module.exports = {
      NODE_ENV: '"testing"',
      ENV_CONFIG:'"test"'
    }

    2)修改config内的prod.env.js文件:

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

    3)对build中webpack.prod.conf.js做如下修改:

    // const env = require('../config/prod.env') //原始代码

    或者为

    // const env = process.env.NODE_ENV === 'testing' //原始代码
    //  ? require('../config/test.env')
    //  : require('../config/prod.env')
    // console.log(process.env.NODE_ENV);

    修改为:

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

    4)config中的index.js 文件中build部分代码修改如下:

    build: {
      prodEnv: require('./prod.env'),
      testEnv: require('./test.env'),
      // Template for index.html
      index: path.resolve(__dirname, '../dist/index.html'),
     // ····余下的代码就不写了
    }

    5)确认安装cross-env

    npm install cross-env –save-dev 

    6)对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()

    7)修改package.json文件(在script里面添加):

    "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
     "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"
    },

    8)在common文件下新建env.js,对环境进行判断并切换,内容如下:

    /*
     * 配置编译环境和线上环境之间的切换
     * baseUrl: 域名地址
     * routerMode: 路由模式
     */
    let baseUrl = '';
    let routerMode = 'history';
    let DEBUG = false;
    let cancleHTTP = [];//取消请求头设置;
    //注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
    if (process.env.NODE_ENV == 'development') {
      baseUrl = "https://10.248.65.100/GetTravelMethod";
      DEBUG = true;
    }else if(process.env.NODE_ENV == 'production'){
      baseUrl = "https://10.248.65.200/GetTravelMethod";
      DEBUG = false;
    }else if(process.env.NODE_ENV == 'testing'){
      baseUrl = "https://10.248.65.150/GetTravelMethod";
      DEBUG = false;
    }
    
    export{
      baseUrl,
      routerMode,
      DEBUG,
      ROLE,
      cancleHTTP
    }

    想要test环境下则运行:

    npm run build--test

    相应的改为production环境则运行:

    npm run build--prod

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • vue-cli3环境变量与分环境打包的方法示例
    • Vue 项目分环境打包的方法示例
    • Vue项目分环境打包的实现步骤

    广而告之:
    热门推荐:
    CSS3 动画卡顿性能优化的完美解决方案

    为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的。但是我们要明确以下几个概念:单线程,主线程和合成线程。 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2个重要的执行···

    vue实现在表格里,取每行的id的方法

    如下所示: 1、在template上写上 slot-scope="scope" 2、然后在template里边的标签上,scope.row.id 以上这篇vue实现在表格里,取每行的id的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持北冥有鱼。 您可能感兴趣的文章: Vue.js获取被选择的o···

    DedeCMS专题之单条记录的模板默认内容在哪修改

     问题: 请问,最火软件编辑,我最近正在使用dedecms制作专题,发现【单条记录的模板】的内容是固定的,那么应该如何修改默认内容?  回答: 请打开以下文件进行修改: \templets\system\spec_arclist.htm 这个文件里...建议修改前进行备份!

    php的字符串用法小结

    1 求长度,最基本的 $text = "sunny day"; $count = strlen($text); // $count = 9 2 字符串截取 截取前多少个字符 $article = "BREAKING NEWS: In ultimate irony, man bites dog."; $summary = substr_replace($article, "...", 40); 3 算单词数 $article = "BREAKIN···

    浅谈CSS中overflow清除浮动的用法

    overflow清除浮动以下面的XHTML代码为例: XML/HTML Code复制内容到剪贴板 <div id="container">   <div id="left"></div>   <div id="right"></div>   </di···

    JS模拟超市简易收银台小程序代码解析

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> // 1.编写一个程序,计算增加后的工资。要求基本工资大于等于1000元,增加20%的工资;若小于1000元且大于等于800元,则增加15%,若小于800元,则增加10%工资。 var basepay = ···

    详解在Node.js中发起HTTP请求的5种方法

    创建HTTP请求使现代编程语言的核心功能之一,也是很多程序员在接触到新的开发环境时最先遇到的技术之一。在Node.js中有相当多的解决方案,其中有语言内置功能,也有开源社区贡献的开发库。下面咱们来看一下比较流行的几种方式。 在开始之前,请先在自己的计算机上安装最新版的n···

    织梦留言簿调用标签代码大全

      在织梦仿站的时候我们会发现织梦DedeCMS自带的留言簿插件的模板里面不能使用普通的dedecms标签,这里是因为留言板的模板里使用的是PHP标签 ,而Dede在使用手册中并未详细列出留言版中的php标签调用,我们需要自己搜索查询,在此列出DedeCMS留言簿调用标签···

    详解JavaScript的BUG和错误

    计算机程序中的缺陷通常称为 bug。 它让程序员觉得很好,将它们想象成小事,只是碰巧进入我们的作品。 实际上,当然,我们自己把它们放在了那里。 如果一个程序是思想的结晶,你可以粗略地将错误分为因为思想混乱引起的错误,以及思想转换为代码时引入的错误。 前者通常比后者···

    php 特殊字符处理函数

    但是我们可以用正则进行替换: 复制代码 代码如下:<?php function dhtmlspecialchars($string) { if(is_array($string)) { foreach($string as $key => $val) { $string[$key] = dhtmlspecialchars($val); } } else { $string = preg_replace('/&((#(\d{3,5}|x[···