交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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项目分环境打包的实现步骤

    广而告之:
    热门推荐:
    php利用递归实现删除文件目录的方法

    直接删除目录,如果是空目录是可以删除,如果不是空目录,这时候只能先删除目录里面的文件,然后再删除目录。我封装了个删除函数,然后直接调用这个函数。喜欢的可以直接拿去用,编码是gbk的,使用时候注意下编码。 <?php /** * Created by PhpStorm. * User: Admi···

    Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子。 本文将继续上篇文中的示例,完成编辑操作。 编辑项操作 用户通过单击“编辑”按钮,相应的项···

    详解JavaScript中的六种错误类型

    刚入前端坑,英语又不太好的同学,是不是还在为控制台的错误抓耳挠腮?今天就带大家看一看JavaScript中常见的错误类型。 js中的控制台的报错信息主要分为两大类,第一类是语法错误,这一类错误在预解析的过程中如果遇到,就会导致整个js文件都无法执行。另一类错误统称为异常,···

    php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法

     php的curl可以用来实现抓取网页,分析网页数据用, 简洁易用, 这里介绍其函数等就不详细描述, 放上代码看看: 只保留了其中几个主要的函数。 实现模拟登陆, 其中可能涉及到session捕获, 然后前后页面涉及参数提供形式。   libcurl主要功能就是用不同的协议连接和沟···

    Html5 web本地存储实例详解

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。 Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的···

    Dreamweaver怎么使用命令检查站点链接的范围?

    Dreamweaver中想要检查站点链接的范围,该怎么检查呢?下面我们就来啊看看详细的教程。 软件名称: Adobe dreamweavercs5 (免激活)简体中文破解绿色免费版 软件大小: 87.67MB 更新时间: 2016-09-14 1、首先,我们点击菜单栏上方的站点小命令。 2、接下来我们会看到二级···

    {dede:field name='softlinks'/}下载页织梦标签修改

    织梦Dedecms的软件模型中,{dede:field name='softlinks'/}默认状态下,经常会遇到下载地址打开方式的问题和图片下载等文章,今天就dedecms中{dede:field name='softlinks'/}下载标签的修改进行说明。   修改如下: 下载/templets/system/文件夹···

    Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示:复制代码 代码如下:<html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clea···

    sqlserver 中时间为空的处理小结

    现将几种主要情况进行小结: 一、如何输入NULL值 如果不输入null值,当时间为空时,会默认写入"1900-01-01",在业务处理时很麻烦。 ctrl+0即可输入NULL值。 二、如何在sql语句中判断为NULL的时间字段 假设表为:TestTable SN    DateTime1    DateTime2 1    2011···

    比较常用证件正则表达式验证大全

    下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多。特发出来,让各位朋友共同使用。 // 身份证验证   jQuery.validator.addMethod("isIdCard", function(value, element, type) { if ($(type).val() === '1') { var re =···